0

我在这里发布了我的示例

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”时，即使它们都应该由相同的代码触发，该文本也不会响应鼠标单击。我究竟做错了什么？

4

3 回答 3

5

将其更改为

$('.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

于 2013-06-16T08:08:51.130 回答
2

那是因为你需要以活泼的方式订阅点击事件，使用.on()函数：

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

现在 jQuery 将执行单击处理程序，即使是在您调用 .on 函数进行订阅时还不存在的 DOM 元素。

于 2013-06-16T08:07:48.137 回答
0

您编写代码的方式，这将起作用；

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

但是，您也可以这样尝试；

<div id="container">
    <p class='para'>
        <div class='test'>Hello</div>
    </p>    
</div>

接着;

 $('#container').on('click', 'div.test', function(e) {
     alert('clicked');
 });
$('.para').append("<div class='test'>Hello 2</div>");
于 2013-06-17T10:33:02.623 回答