CODEWITHSUNDEEP
javascriptjquery
user3371458
user3371458

Reputation: 133

Jquery events do not work on dynamically appended elements

I'm trying to append new DOM objects to some Div and it works, but somehow - the events that I programmed for these new appended objects do not respond. Why is that?

I attach here a simple example: upon click on any paragraph the paragraph should hide. Yet, for paragraph that were added using .append, it doesn't work.

http://jsfiddle.net/xV3HN/

There's my code:

$(document).ready(function(){

$("#add").click(function(){
     $("#containerDiv").append("<p> I should hide as well if you click me </p>");
  });

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

});

Upvotes: 13

Views: 13813

Answers (2)

Subash Selvaraj
Subash Selvaraj

Reputation: 3385

$(document).ready(function(){

 $("#add").click(function(){
     $("#containerDiv").append("<p> I should hide as well if you click me </p>");
  });

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

});

Upvotes: 6

Alessandro Minoccheri
Alessandro Minoccheri

Reputation: 35983

You need to use .on to handle events of dynamic elements.
try this:

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

DEMO

Upvotes: 35

Related Questions