为啥单击事件处理程序会在页面加载后立即触发？

Posted 2023-05-07

【中文标题】为啥单击事件处理程序会在页面加载后立即触发？

【英文标题】：Why does click event handler fire immediately upon page load?为什么单击事件处理程序会在页面加载后立即触发？

【发布时间】：2011-10-29 11:11:54

【问题描述】：

我在玩一个我想绑定到所有链接的函数。目前，该功能在页面加载时触发，而不是在我单击链接时触发。

这是我的代码。 （我可以发布函数showDiv()，如果你需要查看它。）你能告诉我在这里做错了什么或愚蠢吗？

$(document).ready(function()

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

);

谢谢！

【问题讨论】：

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

顺便说一句：在较新的版本中应该使用.on ***.com/questions/11847021/jquery-s-bind-vs-on

【参考方案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 计算并返回一个函数，该函数将被分配为点击事件的回调。

【讨论】：

特别是，showDiv() invokes 从 expression 评估的函数对象 showDiv -- showDiv 本身仅评估为可用作回调的函数对象（在本例中）。 （没有“参考”；-)

+1 这发生在我身上，我一生都想不通，在阅读了你的答案后很明显.. 哦！

我尝试了各种方式，单独使用函数名对我不起作用。最后 anon 函数起作用了。谢谢。

@MrGuliarte，阅读开头的部分“或者，您可以使用匿名函数来执行更高级的功能”

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

【参考方案2】：

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

你想要类似的东西

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

【参考方案3】：

使用下面的行。 showDiv() 将在该行执行时立即调用该函数。

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

【参考方案4】：

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