我在使用 on() 时遇到问题,因为 live() 已被弃用。
这似乎不起作用:
$('body').on("click", ".myButton", console.log("clicked"));
当我刷新页面时,即使我没有点击任何东西,控制台也会立即显示“点击”,但当我实际点击它时不会触发。
此外,将其应用于按钮所在的 DIV 似乎更高效,而不是 BODY 的巨大范围。这是真的?
我在使用 on() 时遇到问题,因为 live() 已被弃用。
这似乎不起作用:
$('body').on("click", ".myButton", console.log("clicked"));
当我刷新页面时,即使我没有点击任何东西,控制台也会立即显示“点击”,但当我实际点击它时不会触发。
此外,将其应用于按钮所在的 DIV 似乎更高效,而不是 BODY 的巨大范围。这是真的?
$(function(){
$('body').on("click", ".myButton",function(){
alert("clicked");
});
});
您看到的奇怪行为是因为您实际上是console.log
在那条线上打电话给自己。您应该将其包装在一个函数中。
function () { console.log('clicked'); }
$('body').on("click", ".myButton", function() {
console.log("clicked")
});
您问题的第一部分已被其他答案充分回答。您正在调用您的console.log()
函数,而不是传递对稍后可以调用的函数的引用。
要回答其他人尚未解决的问题的第二部分:
是的,将事件处理程序的范围限定为按钮的更接近的祖先而不是使用$('body')
.
您应该选择尽可能靠近按钮的按钮的祖先,但在安装事件处理程序时静态存在(而不是稍后动态销毁/创建)。
.live()
不赞成使用的一个主要原因.on()
是.live()
将其所有事件处理程序放在document
对象上,并且在繁忙的页面中,对象上可能有很多委托的事件处理程序document
。当这种情况发生时,单个事件会一直冒泡到document
对象,然后每个单个事件都必须与一长串可能的委托事件处理程序进行比较。由于这通常意味着运行选择器操作而不是eventTarget
,因此这确实会变得很慢。
另一方面,如果您选择了一个更接近所需事件目标的祖先对象,那么来自更小的对象列表中的更小的事件列表会流经这个特定的委托事件处理程序,并且整个事件系统可以执行得更好.
为了获得大量事件/对象的最佳性能,委托事件处理程序应尽可能靠近目标对象应用。