Jquery事件不适用于动态追加的元素

Question

我正在尝试将新DOM对象附加到某个Div并且它可以工作，但不知何故 - 我为这些新附加对象编写的事件没有响应。那是为什么？

我在这里附上一个简单的例子：点击段落应该隐藏的任何段落。然而，对于使用.append添加的段落，它不起作用。

http://jsfiddle.net/xV3HN/

我的代码是：

$(document).ready(function(){

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

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

});

Answer 1

您需要使用.on来处理动态元素的事件  试试这个：

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

DEMO

Answer 2

$(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();
  });

});