javascript - 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