Unable to select element paragraph using jquery

Question

Unable to select element paragraph using jquery

263 Views Asked by Dhayalan Pro At 17 April 2025 at 16:32

<html>
<head>
<script>
$(document).ready(function(){
 $("p").click(function(){
     $(this).hide();
  });

});
  function func(){
var s = "<p id=" + id +">"+"<center>"+"<h2><b>Topic :</b></h2>"+message+"</center></p><br>";
document.getElementById("stat").innerHTML+=s;

}
</script>



</head>
<body>
//call function func
<pre id="stat" > </pre>
</body>
</html>

Guys the function func is supposed to create a paragraph with id as "id " and the content as a message inside the tag with id as "stat " .. it works fine But i cant use the 'Jquery' selector to use the click function on

tag :/ ! the reason i am inserting inside in is i need the interpreter to consider "\n" as a new line. Why is that , not working ?

and is there any other way to do it ?

Original Q&A

There are 6 best solutions below

**johnnycardy** · Answer 1

Attach the click event handler inside func:

function func(){
    var s = "<p id=" + id +">"+"<center>"+"<h2><b>Topic :</b></h2>"+message+"</center></p><br>";
    document.getElementById("stat").innerHTML+=s;


    $("#" + id).click(function(){
        $(this).hide();
    });
}

Or better still:

function func(){
    var s = $("<p id=" + id +">"+"<center>"+"<h2><b>Topic :</b></h2>"+message+"</center></p><br>");
    $("#stat").append(s);

    s.click(function(){
        $(this).hide();
    });
}

**Friedrich** · Answer 2

the fastest way will be to change

var s = "<p id=" + id +">"+"<center>"+"<h2><b>Topic :</b></h2>"+message+"</center></p><br>";

to

var s = "<p id=" + id +" onclick=\"$(this).hide()\">"+"<center>"+"<h2><b>Topic :</b></h2>"+message+"</center></p><br>";

and delete this

$(document).ready(function(){
 $("p").click(function(){
     $(this).hide();
  });

});

**Pranav C Balan** · Answer 3

Pranav C Balan On 02 January 2014 at 15:34

Try this,

$(document).ready(function(){
 $(document).on('click','p',function(){
     $(this).hide();
  });    
});

**arun15thmay** · Answer 4

$(document).on('click', 'p', function() { $(this).hide();})

The code you wrote is not working because the p element is not present when the document is loaded. Since the p element is dynamically added, you have to attach the event to the document object

**zgood** · Answer 5

zgood On 02 January 2014 at 15:35

This may help:

$('body').on('click', 'p', function(){
   $(this).hide();
});

**Scott Selby** · Answer 6

Scott Selby On 02 January 2014 at 15:35

use .on() instead

 $(document).on('click', 'p', function(){
     $(this).hide();
  });

.on() has to ability to add a click handler to elements that are created dynamically , like your <p> tags are

Unable to select element paragraph using jquery

There are 6 best solutions below

Related Questions in JAVASCRIPT

Related Questions in JQUERY

Related Questions in HTML

Related Questions in PARAGRAPH

Related Questions in PRE

Trending Questions

Popular # Hahtags

Popular Questions