将 jQuery .click() 函数作为变量传递

Question

我正在使用选项卡式界面，并设置以下 jQuery 函数来处理选项卡的单击事件。

$(document).ready(function () {

    $('a#foo').click(function() {
        //content, various calls
        return false;
    });
});

上面是我的一个选项卡的示例，其他选项卡也在同一个文档就绪块中。我需要做的是使当前选定的选项卡无法重新单击，并且在其他一些情况下，我可以根据需要手动禁用选项卡。我通过以下方式实现了这一点：

$('a#play').unbind('click');    

这工作正常，并且它肯定会禁用选项卡，但问题是重新绑定曾经存在的单击操作。我通过绑定函数实现了这一点：

$('a#foo').bind('click', function() {
//the same content and calls as before
return false;
});

这也可以正常工作，但是当我向用户界面添加选项卡时，它变得非常混乱。直接的解决方案似乎是将函数创建为变量，然后将其传递到初始单击创建和绑定事件中。就像这样：

var Foo = new function() {
    //same content and calls as before
    return false;
}

$('a#foo').click(Foo());

$('a#foo').bind(Foo());

由于某种原因，这似乎导致了浏览器崩溃问题。在这种情况下，是否无法将函数作为 var 传递，或者我只是做错了？或者，是否有更好的方法来实现我正在寻找的结果？谢谢。

Answer 1

$('a#foo').click(Foo());

$('a#foo').bind(Foo());

Foo 为您提供了该函数，但在其后添加 () 意味着您正在调用该函数而不是传递函数本身。由于您正在调用该函数，false 最终会传递给 click 和 bind，显然没有执行任何操作。您的其他一些问题可能是由于您模拟切换到该选项卡两次（调用事件处理程序两次）而导致的。

var Foo = function() {
    //same content and calls as before
    return false;
}

$('a#foo').click(Foo);

$('a#foo').bind(Foo);

^^ 应该做你想做的事。

---

或者，是否有更好的方法来实现我正在寻找的结果？

目前我们对您的设计真正了解的是您正在使用单击事件处理程序来调用来切换选项卡。这部分很棒，但我们需要更多信息才能为您提供真正想要的更深入的答案。如果您将代码发布到 Foo 中，我们应该能够提供更多帮助。 :D

---

编辑：感谢 SLaks♦ 注意到我错过的函数声明中的new。我将在他的解释中添加更多细节：

当你写 var foo = new 时
function(...) { ... }，你正在做一个
函数文字，然后将其调用为
构造函数。

相当于

var SomeClass = function(...) { ... };
var foo = new SomeClass;

没有 SomeClass 虚拟变量。

正如您所期望的，function() {} 是一个匿名函数。 javascript 中的 new 有点令人困惑。当您调用一个函数并在其前面添加 new 时，您正在使用该函数来实例化该函数中定义的类的实例。在 JS 中，与大多数其他语言不同，类的整个定义都在一个构造函数中，您可以从中设置所有实例变量，如下所示：

Foo = function() { 
    this.a = "lala";
    this.b = 5;
}

要创建“类”的实例方法，请使用原型属性。 但是我刚刚意识到我已经偏离主题了。详细了解此处和此处。 ：D

Answer 2

您需要从函数定义中删除new，并在使用该函数时停止调用该函数。

当您编写 var foo = new function(...) { ... } 时，您正在创建一个函数文字，然后将其作为构造函数调用。

这相当于

var SomeClass = function(...) { ... };
var foo = new SomeClass;

没有 SomeClass 虚拟变量。

您只需将函数文字分配给变量即可。

---

当您编写 .click(foo()) 时，您调用 foo，并将结果传递给 click.
除非 foo 返回一个函数，否则这不是您想要做的。

您需要通过删除括号来传递 foo 本身。

Answer 3

因此，首先，click 接受一个函数，但是您可以在不使用 () 的情况下进行调用，因为 click 会在准备就绪时运行该函数。通过添加 ()，您可以直接调用它。

其次，bind 需要一个字符串（您要绑定到什么事件）和一个函数（如上所述）...

使用以下内容：

function Foo() {
    //same content and calls as before
    return false;
}


$('a#foo').click(Foo);    
$('a#foo').bind('click', Foo);

希望有帮助:)

Answer 4

尝试：

var foo = function() // not "new function", as this creates an object!
{
    return false;
}

$("a#foo").click(foo); // not "Foo()", as you can't call an object!

---

为了获得您正在寻找的结果的更好方法，您可以在每个选项卡上都有一个类，例如.tab。这样，您就可以执行以下操作：

$("a.tab").click(function() { return false; });

...，而不必使用大量 id 。

Answer 5

采用不同的方法，不要unbind()。

我假设选项卡都在一个公共容器中。如果是这样，只需使用 delegate()^{(docs)< /i>} 方法在容器上放置处理程序。

下面是一个通用代码示例：

$('#container').delegate('.tab:not(.selected)', 'click', function() {
    $(this).addClass('selected')
           .siblings('selected').removeClass('selected');
    // rest of the tab code
});

这只会触发对不具有 .selected 类的 .tab 元素的点击。您需要针对您的特定代码进行修改。

Answer 6

添加括号会调用该函数，但如果您想让它变得更酷，您可以这样做，以便 Foo 返回要绑定的函数。

function Foo(){

    return function(){
        //your onclick event handler here.
    };
}

$('a#bar').bind(Foo())

这利用了 javascript 的函数编程方面的一个，即闭包，这很酷，但不如其他一些答案那么有效。您应该对闭包进行一些研究，因为它们可以用来制作一些很酷的东西。
http://www.javascriptkit.com/javatutors/closures.shtml