jquery - 为什么没有正文的点击不起作用

Question

我在页面上有多个 myclass 类，我附加了一些使用 ajax 的类

如果我这样做

$('.myclass').click(function(){
          alert(1);
});

它适用于所有非 ajax 附加请求，但不适用于由 ajax 附加的类。对于那些有效的

$(body).on('click','myclass',function(){
alert(1);
});

我的问题，为什么会这样？？

Answer 1

可以简单解释一下

当您使用正常的事件注册模型时，它会将处理程序直接注册到目标，这些处理程序在处理程序注册执行时存在于 dom 中。因此，稍后动态添加的元素将不会获得这些处理程序。

对此的解决方案是使用事件委托，在此模型中，处理程序被注册到祖先元素，当使用选择器加载页面以过滤掉源元素时，该元素将出现。这利用了事件传播——一个元素中发生的事件被传播到所有祖先元素（很少有像焦点事件这样的例外）。因此，一个元素中发生的事件会传播到其中一个元素中的祖先元素，然后注册处理程序，然后事件源元素（event.target）及其祖先与作为第二个参数传递的选择器匹配，如果满足则处理程序被执行。 http://api.jquery.com/on/#direct-and-delegated-events

Answer 2

第一种方法遍历处理程序执行时存在的元素，因此绑定了当时找到的任何内容。

$('.myclass').click(function(){
          alert(1);
});

这允许在此之后创建的元素被单独处理。

使用事件委托（您列出的第二种方法），您可以使用所需的选择器管理 DOM 中存在的所有元素。

$(body).on('click','myclass',function(){
    alert(1);
});

如果您希望将动态元素添加到页面中，则使用事件委托的解决方案将允许您处理所有元素，无论它们是何时创建的。

Answer 3

试试这个代码：

$('.myclass').on("click", function(){
      alert(1);
});

Live 用于将事件委托给元素，即使该元素在 dom 中仍然不存在