JQuery click()事件监听器失效问题求助

嘿，我一眼就看到问题所在啦！你当前的代码里犯了一个很常见的新手错误——直接执行了函数，而不是把函数作为事件处理程序传递。

错误原因 #

你写的代码是：

$(document).ready(function() { $("#search-button").click(console.log('hello')) });

这里的console.log('hello')是一个函数调用，当$(document).ready执行时，这行代码会立刻运行，所以页面一加载就输出了hello。而click方法需要的是一个函数引用（也就是告诉它“当点击发生时要执行哪个函数”），你现在传递的是console.log执行后的结果（undefined，因为console.log没有返回值），所以点击按钮时自然没有任何反应。

正确的写法 #

有两种常见的修正方式：

方式1：使用匿名函数包裹

把你要执行的代码放在一个匿名函数里，把这个函数传递给click：

$(document).ready(function() { 
  $("#search-button").click(function() {
    console.log('hello');
  });
});

这样一来，只有当按钮被点击时，这个匿名函数才会被触发，里面的console.log才会执行。

方式2：使用命名函数

如果你的逻辑比较复杂，也可以先定义一个命名函数，再把函数名（注意不要加括号！）传递给click：

function logHello() {
  console.log('hello');
}

$(document).ready(function() { 
  $("#search-button").click(logHello);
});

这里传递的是logHello这个函数的引用，而不是执行它，所以点击按钮时才会调用这个函数。

核心要点 #

事件绑定的关键是：给事件方法（比如click）传递的是函数本身，而不是函数调用的结果。只要你加了括号（比如logHello()），就会立即执行这个函数，而不是等待事件触发。

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