gpt4 book ai didi

javascript - 通过 each() 添加的 jQuery 事件处理程序似乎覆盖了早期的事件处理程序

转载 作者:行者123 更新时间:2023-11-30 07:16:13 26 4
gpt4 key购买 nike

这是我第一次使用 jquery,我不明白以下“副作用”:

脚本.js:

$(function() {
$("button").each(function() {
$t=$(this);
$t.on("click", function() {
console.log("Id: " + $t.attr('id'));
});
});
});

HTML:

...
<body>
<button id="de">de</button>
<button id="en">en</button>
</body>

当我单击“de”按钮然后单击“en”按钮时,日志会给我:

en
en

好像是第二次调用覆盖监听函数的效果吧?我该如何避免这种情况?

最佳答案

更新后

在您更新的问题中,$t 是一个global 变量。在 JavaScript 中(通常)你声明的所有没有预先放置 var 的东西都是绑定(bind)到 window(在浏览器中)的全局变量。

您可以通过将 $t = ... 更改为 var $t = ... 来修复您的代码,这将声明 $t在处理程序中


jQuery 允许您将点击处理程序附加到多个按钮,而无需使用 .each 遍历它们。

您的代码应该可以工作,但如果您以可能更改 this 的方式调用处理程序,则可能会出现问题(请注意,您可以关闭 this (或使用绑定(bind))在代码中的 .each 中以确保您获得相同的 this,您也可以尝试记录 $(this)。 attr('id') 在每个)

尝试:

$(function(){
$("button").click(function() {
console.log("Id: " + $(this).attr('id'));
});
});

Here is a working fiddle

(Your original code works too by the way (fiddle))

在处理程序中,jQuery 返回实际的 dom 元素,您将其包装在 $() 中以再次创建 jQuery 对象。您不需要构造一个 jQuery 对象来获取 ID,$(this).attr('id') 可以替换为 this.id

关于javascript - 通过 each() 添加的 jQuery 事件处理程序似乎覆盖了早期的事件处理程序,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/16435512/

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com