Question

我在on（）上遇到了麻烦，因为不推荐使用live（）。

这似乎不起作用：

$('body').on("click", ".myButton", console.log("clicked"));

当我刷新页面时，控制台会立即说“点击”，即使我没有点击任何内容，但是当我实际点击它时不会触发。

此外，将此应用于按钮所在的DIV似乎更有效，而不是BODY的巨大范围。这是真的吗？

Answer 1

$(function(){
    $('body').on("click", ".myButton",function(){
       alert("clicked");
    });
});

Answer 2

您所看到的奇怪行为是因为您实际上是在自己的线路上呼叫console.log。你应该将它包装在一个函数中。

function () { console.log('clicked'); }

Answer 3

$('body').on("click", ".myButton", function() {
     console.log("clicked")
});

Answer 4

您的问题的第一部分已得到其他答案的充分回答。您正在调用console.log()函数，而不是将引用传递给稍后可以调用的函数。

要回答您的问题的第二部分，其他人尚未解决：

是的，它会更好地将您的事件处理程序范围扩展到按钮的更近的祖先，而不是使用$('body')。

您应该选择尽可能靠近按钮的按钮的祖先，但在安装事件处理程序时静态存在（并且不会动态销毁/稍后创建）。

.live()被弃用以支持.on()的一个主要原因是.live()将所有事件处理程序放在document对象上，在繁忙的页面中，可以在document对象上有很多委托的事件处理程序。当发生这种情况时，单个事件一直冒泡到document对象，然后必须将每个事件与可能的委托事件处理程序的长列表进行比较。因为这通常意味着运行选择器操作而不是eventTarget，所以这可能会变慢。

另一方面，如果您选择一个更接近所需eventTarget的祖先对象，那么来自更小的对象列表的更小的事件列表将流经此特定的委托事件处理程序和整个事件系统可以表现得更好。

为了获得具有大量事件/对象的最佳性能，委托事件处理程序应尽可能靠近目标对象应用。

使用on（）将事件处理程序附加到将动态创建的元素

4 个答案: