为什么页面加载时点击事件处理程序会立即触发？

Question

我在尝试绑定一个函数到所有的链接上。目前这个函数在页面加载时就已经执行了，而不是在点击链接时执行。

这是我的代码。（如果需要查看函数showDiv()，我可以将其发布。）你能告诉我是否犯了什么错误或愚蠢的地方吗？

$(document).ready(function(){

    $('a.test').bind("click", showDiv());

});

谢谢！

- Jeff

---

关于如何以“jQuery方式”编写代码的一些注意事项，使用jQuery(function($){ $('a.test').click(showDiv); });。如果jQuery的工厂函数接收到一个函数，它会自动将其用作document.ready回调。document.ready回调将作为第一个参数发送jQuery对象，这允许您将jQuery别名为$，以防止任何可能的多库问题。此外，使用事件快捷方式可以提高可读性。 - zzzzBov

顺便提一下：在更新的版本中应该使用.on。https://dev59.com/nmgt5IYBdhLWcg3wvgBu - marsze

相关链接：https://dev59.com/3nA75IYBdhLWcg3wg5fs - Bergi

Answer 1

你想把一个函数的引用作为回调传递给另一个函数，而不是函数执行的结果:

showDiv()返回一些值; 如果没有使用return语句，则返回undefined。

showDiv是应该被执行的函数的引用。

这样应该可以工作：

$(document).ready(function() {
  $('a.test').on("click", showDiv); // jQuery 1.7 and higher
  $('a.test').bind("click", showDiv); // jQuery 1.6 and lower
});

或者，您可以使用匿名函数来执行更高级的功能：

// jQuery 1.7 and higher
el.on('click', function() {
  foo.showDiv(a, b, c);
  // more code...
});

// jQuery 1.6 and lower
el.bind('click', function() {
  foo.showDiv(a, b, c);
  // more code...
});

在某些情况下，您可能会 希望 将函数返回的值用作回调：

function function foo(which) {
  function bar() {
    console.log('so very true');
  }

  function baz() {
    console.log('no way!');
  }

  return which ? bar : baz;
}

el.click(foo(fizz));

在这个例子中，foo使用fizz进行求值，并返回一个函数，该函数将被分配为单击事件的回调。

- zzzzBov

---

特别地，showDiv()会调用从表达式showDiv求值得到的函数对象 -- showDiv本身仅仅求值为一个函数对象（在这种情况下），可以用作回调。 （没有“引用”;-)） - user166390

+1 这也发生在我身上，但我怎么也想不出原因。看了你的回答后，问题显而易见了。D'oh! - MattSizzle

我尝试了各种方法，仅使用函数名称对我没有起作用。最终匿名函数起作用了。谢谢。 - punstress

@MrGuliarte，请阅读以下部分：“或者，您可以使用匿名函数执行更高级的功能”。 - zzzzBov

我知道这篇文章很老了，但我遇到了与OP相同的问题。但是这里的解决方案都不起作用。我正在尝试使用$(document).ready内部的匿名函数将onclick附加到Body元素。但是匿名函数在页面加载后立即启动：$('body').on('click', function() { alert("Clicked On MyClass element"); }); - KMC

@user30646，请创建一个 [mcve] 并花些时间调试实际问题。您提供的代码完全正常运行。 - zzzzBov

Answer 2

看起来你直接调用了showDiv函数，并将showDiv()的返回结果绑定到点击处理程序，而不是直接绑定。

你需要像这样：

$(document).ready(function() { $('a.test').bind("click", showDiv); });

- tjarratt

Answer 3

使用下面这行代码。当执行该行代码时，showDiv()函数将立即被调用。

$('a.test').bind("click", showDiv);

- ShankarSangoli

Answer 4

将其更改为：$('a.test').bind("click", showDiv);（不要在showDiv周围放置括号，因为您希望传递函数引用）。

- Mrchief