页面加载后jQuery的click事件仅生效一次的问题咨询

嘿，我一眼就瞅出你代码里的问题啦——你在绑定点击事件的时候犯了个很典型的小错误：

你写的是：

$("div.toolbar-item").click(toolbar_click_listener());

这里的问题在于，你给click()方法传的是函数执行的结果（因为加了括号()，页面加载时这个函数就直接跑起来了），而不是函数本身的引用。这就导致点击div的时候根本不会触发这个函数，反而页面一加载它就执行了。

修复方法 #

基础版（不需要传参数） #

直接去掉函数后面的括号，把函数引用传给click()：

$("div.toolbar-item").click(toolbar_click_listener);

带参数版 #

如果你的toolbar_click_listener需要接收参数，那就用匿名函数包裹一下：

$("div.toolbar-item").click(function() {
  // 这里可以传你需要的参数
  toolbar_click_listener("your-parameter");
});

或者用ES6箭头函数（如果你的项目环境支持的话）：

$("div.toolbar-item").click(() => toolbar_click_listener("your-parameter"));

额外说明 #

当你把带括号的函数传给事件绑定方法时，JS会立刻执行这个函数，然后把它的返回值（如果函数有return的话）当作事件处理函数。但我们需要的是让事件触发时才去调用这个函数，所以必须传递不带括号的函数名，也就是函数的引用。

内容的提问来源于stack exchange，提问作者Eugene