jQuery .click( foo() ) 意外行为答案

【问题标题】：jQuery .click( foo() ) unexpected behaviorjQuery .click( foo() ) 意外行为
【发布时间】：2011-04-01 01:11:12
【问题描述】：

今天我在我的网络应用程序中遇到了一个关于表单搜索提交功能（在 js 中）和 jQuery 中的按钮单击操作的错误。

我有一个附有submitEmpSearch() 操作的表单。这嵌入在表单的 html 中，因为它是 onSubmit 操作。还有一个与带有onclick 事件submitEmpSearch() 的表单相关联的搜索按钮。我试图从模板中清除嵌入的 javascript 以支持 jQuery 调用。在包含的 jQuery 调用中，我在$(document).ready 组中调用了$('#search-button').click( submitEmpSearch() )。

根据我之前使用.click() 函数的经验，我希望它具有与提供的嵌入式onclick 属性相同的功能。然而，相反，它给页面一个无限循环（显然）在加载后立即单击按钮！

现在，以前，我总是通过function() {} 模式。我以前从未传入过预定义的函数。这是 jQuery ~~language~~ 框架中的某种陷阱吗？还是我做错了什么？

【问题讨论】：

标签： javascript jquery webforms jquery-events

【解决方案1】：

jQuery 不是一种语言。 JavaScript 是语言。当您想传递函数本身时，您正在传递函数的 result：

应该是：

$('#search-button').click(submitEmpSearch)

在 JavaScript 中，函数可以作为值传递。然而，submitEmpSearch() 是函数调用的返回值，正如人们对其他语言所期望的那样。

【讨论】：

只是说jQuery is not a language. 是用心良苦的，但非常误导:)
@Christian，我不同意。认为 jQuery 是一种编程语言的人往往会忽视学习他们正在使用的真正语言。然后，他们会犯这样的错误。
这就是为什么我说它是“善意的”，因为这种语法对于其他语言也是一样的。例如，在 PHP 中，您将函数名作为字符串传递。其他语言和 jquery(javascript) 一样，包括 c++ 和 delphi。
由于缺乏 jquery 知识，这并不是一个真正的错误。如果甚至不使用 jquery，在标准 JavaScript 语法中很容易犯同样的错误。
@Christian，语言是 JavaScript。我同意其他语言在这方面的行为与 JavaScript 相似（尽管 PHP 只是最近才获得真正的闭包）。 @Kon，我说的正好相反；由于没有学习“真正的语言”JavaScript，这是一个错误。

【解决方案2】：

代替

$('search-button').click( submitEmpSearch() )

只使用

$('#search-button').click( submitEmpSearch )

或

$('#search-button').click( function(){submitEmpSearch();} )

此外，如果“搜索按钮”是一个类，您必须添加一个“。” （点）在它之前。如果是 id，则必须添加“#”。请参阅我的示例。

【讨论】：

【解决方案3】：

啊哈！

你应该通过引用传递函数，而不是调用函数并传递它的结果：

function handler(){
    // ...
}
jQuery('.something').click(handler()); // <- wrong
jQuery('.something').click( handler ); // <- right

【讨论】：

我发誓我在检查 jQuery 文档后尝试过：将引用传递给函数是有道理的，但我认为它没有解决任何问题。然而，我是结对编程，而不是坐在驾驶座上的那个。我正在再次检查它。
aahh，小组编程的奇迹和遗漏的东西应该是显而易见的。试过了，修复了错误，失去了按钮功能。忘记实际将 id 添加到按钮。掌心

【解决方案4】：

更改自：

$('search-button').click(submitEmpSearch())

到：

$('search-button').click(submitEmpSearch)

这种方式不是执行 submitEmpSearch() 并将其返回值传递给 click()，而是将委托传递给 click()。

【讨论】：

【解决方案5】：

试试这个。

$('#search-button').click(function(){
    submitEmpSearch();
});

【讨论】：

不需要额外的间接层。
它会起作用，但它并没有真正回答这个问题。虽然我不会投反对票。