Question

我在这里发布了我的例子

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

Answer 2

那是因为你需要使用.on()函数以生动的方式订阅click事件：

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

现在jQuery将执行click处理程序，即使对于在调用.on函数进行订阅时尚未存在的DOM元素也是如此。

Answer 3

你编写代码的方式，这将有效;

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

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

3 个答案: