为什么我的页面响应没有鼠标点击？

Question

我在这里发布了我的例子

http://jsfiddle.net/abt5w/1/

HTML:

<p class='para'>
<div class='test'>Hello</div>
</p>   

JS:

 $('.test').on('click', function(e) {
     alert('clicked');
 });
$('.para').append("<div class='test'>Hello 2</div>"); 

标准的"Hello"响应鼠标点击.但是,当我追加'Hello 2'时,文本不会响应鼠标单击,即使它们都应该由相同的代码触发.我究竟做错了什么？

Answer 1

将其更改为

$('.para').on("click",".test",function(e) {
     alert('clicked');
 });

使用委托事件时,事件处理程序仅附加到父元素.Jquery不为后代元素附加更多事件处理程序.这是另一个好处

提供选择器时,事件处理程序称为委托.当事件直接发生在绑定元素上时,不会调用处理程序,但仅适用于与选择器匹配的后代(内部元素).jQuery将事件从事件目标起泡到附加处理程序的元素(即最里面到最外层的元素),并为匹配选择器的路径上的任何元素运行处理程序.

除了能够处理尚未创建的后代元素上的事件之外,委托事件的另一个优点是,当必须监视许多元素时,它们可能会有更低的开销.在其tbody中有1,000行的数据表中,此示例附加了一个处理程序1,000个元素:

 $("#dataTable tbody tr").on("click", function(event){  
      alert($(this).text()); 
   }); 

委托事件方法仅将事件处理程序附加到一个元素tbody,并且事件只需要向上冒一个级别(从单击的tr到tbody):

$("#dataTable tbody").on("click", "tr", function(event){  
 alert($(this).text()); 
});

从$ .on

您可以将委派的事件处理程序附加到document您需要监视所有的事件处理程序.test

$(document).on("click",".test",function(e) {
     alert('clicked');
 });

但正如文件所述,该事件必须增加更多层次.考虑附加到文档或仅附加.para