jQuery中绑定按钮的click事件函数在页面加载时自动执行问题

嘿，我一眼就看出问题所在啦——你在绑定点击事件的时候犯了个小错误：你直接调用了函数，而不是把函数本身作为事件处理程序传递。

看你写的这段代码：

$("#search-button").on("click", searchFunction());

这里的searchFunction()后面带了括号()，这相当于在页面加载的瞬间就直接执行了这个函数，然后把函数执行后的返回值（如果有的话）传给了点击事件。这可不是你想要的效果对吧？

怎么修复？超简单！ #

只需要去掉函数后面的括号，把函数的引用传进去就行：

$("#search-button").on("click", searchFunction);

这样一来，只有当你点击#search-button按钮的时候，searchFunction才会被触发执行。

额外给你两种常用的写法（适合需要传参的场景）： #

1. 用匿名函数包裹，方便传递参数：

$("#search-button").on("click", function() {
  // 这里可以给searchFunction传参数，比如searchFunction('关键词')
  searchFunction();
});

2. ES6箭头函数的简洁写法：

$("#search-button").on("click", () => searchFunction());

改完之后再试试，函数就只会乖乖等你点击按钮才运行啦～

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