Jquery 为什么'；难道我的页面响应没有鼠标点击吗？

我已经在这里发布了我的示例

HTML:

你好

JS:

$（'.test'）。在（'click'，函数（e）上{
警报（“点击”）；
});
$（'.para'）。追加（“Hello 2”）；

---

标准的“Hello”响应鼠标点击。但是，当我附加“Hello 2”时，文本不会响应鼠标单击，即使它们都应该由相同的代码触发。我做错了什么？

这是因为您需要使用

.on（）

函数以生动的方式订阅单击事件：

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

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

将其更改为

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

使用委派事件时，事件处理程序仅附加到父元素。Jquery不会为子元素附加更多的事件处理程序。这是另一个好处

当提供选择器时，事件处理程序称为 委派。当事件直接发生在上时，不调用处理程序 绑定元素，但仅适用于 匹配选择器。jQuery将事件从事件目标向上冒泡 到处理程序所附加的元素（即，最内层到 最外层的元素），并为沿着该元素的任何元素运行处理程序 与选择器匹配的路径

除了处理后代元素上的事件的能力之外 尚未创建，委派事件的另一个优点是 当必须使用多个元素时，可能会产生更低的开销 监视。在tbody中包含1000行的数据表上，此示例将处理程序附加到1000个元素：

委派事件方法附加了 事件处理程序只指向一个元素，即tbody，事件只需要 向上冒泡一级（从单击的tr到tbody）：

从

如果需要监视所有

.test

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

---

但正如文件所述，这一事件必须上升到更高的层次。考虑附加到文档中，或者只考虑<代码>。PARA

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

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

$（“#容器”）。在（'click'，'div.test'，函数（e）上{
警报（“点击”）；
});
$（'.para'）。追加（“Hello 2”）；

您认为jquery附加了更多的事件处理程序吗？实际上，jquery不会侦听与选择器匹配的DOM元素并自动附加。单击事件到它们是的，您是正确的。我已经更新了我的答案。谢谢你指出这一点。我想这行不通。因为他在一个

.para

的末尾追加了。

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

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