为了澄清这个问题，让我举一个如下的例子。
我有三个<div>如下所示的元素:
<div id="fail-item" class="toolbar-item">
Fail
</div>
<div id="warn-item" class="toolbar-item">
Warn
</div>
<div id="pass-item" class="toolbar-item">
Pass
</div>
我为每个 <div> 添加了点击监听器使用 Jquery 列出如下:
<body>
<script>
$("div.toolbar-item").click(toolbar_click_listener());
function toolbar_click_listener(){
console.log("what happens");
}
</script>
</body>
但是，当我加载页面时，我只能看到“发生了什么”打印一次，任何进一步的点击事件都会发生在 <div> 上。元素根本不起作用。
我搜索过SO但未能得到答案。你知道这里出了什么问题吗？
最佳答案
它应该是处理程序中的函数引用，而不是函数调用。
您的点击处理程序不应在页面加载时调用。发生这种情况是因为您在这里调用它 .click(toolbar_click_listener()); 您不会想要这样的。
当您想要为事件分配处理程序时。您引用该函数而不是调用它。
将其更改为 .click(toolbar_click_listener);，您将看到预期的行为
$("div.toolbar-item").click(toolbar_click_listener);
function toolbar_click_listener(){
console.log("what happens");
} <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div id="fail-item" class="toolbar-item">
Fail
</div>
<div id="warn-item" class="toolbar-item">
Warn
</div>
<div id="pass-item" class="toolbar-item">
Pass
</div>关于javascript - 为什么jquery中的click在加载页面时只起作用一次，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/49995524/