将jQuery .click（）函数作为变量传递

Question

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

$(document).ready(function () {

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

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

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

这工作正常，它肯定会禁用选项卡，但问题然后重新绑定曾经存在的点击操作。 我通过bind函数实现了这个目的：

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

这也很好，但它已经变得非常混乱，因为我已经添加了选项卡到我的UI。 直接的解决方案似乎是将函数创建为变量，然后将其传递给初始点击创建和绑定事件。 像这样：

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;
}

要创建“类”的实例方法，请使用prototype属性。 但是我才刚刚意识到我已经超越了主题。 在这里和这里阅读更多内容。 ：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在准备就绪时会运行该函数。 通过添加（），您可以直接调用它。

其次，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() 。

我假设标签都在一个公共容器中。 method to place a handler on the container. 如果是这样，只需使用delegate() 方法在容器上放置一个处理程序。

这是一个通用的代码示例：

$('#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