4

我正在使用选项卡式界面，并设置了以下 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;
});

这也可以正常工作，但是随着我在 UI 中添加选项卡，它变得非常混乱。直接的解决方案似乎是将函数创建为变量，然后将其传递给初始点击创建和绑定事件。像这样：

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

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

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

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

4

6 回答 6

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

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

为Foo您提供函数，但()在它之后添加 ' 意味着您正在调用函数而不是传递函数本身。由于您正在调用该函数，因此false最终被传递给clickand 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() {}正如您所期望的那样，这是一个匿名函数。new在 javascript 中有点混乱。当您调用一个函数并在它前面加上 时new，您正在使用该函数来实例化该函数中定义的类的实例。在 JS 中，与大多数其他语言不同，类的整个定义在一个构造函数中，您可以从中设置所有实例变量，如下所示：

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

要创建“类”的实例方法，请使用原型属性。然而，我刚刚意识到我已经变得超级跑题了。在此处和此处阅读更多信息。:D

于 2011-02-09T00:54:16.213 回答
3

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

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

相当于

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

没有SomeClass虚拟变量。

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

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

您需要foo通过删除括号来传递自己。

于 2011-02-09T00:55:14.710 回答
3

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

其次， bind 需要一个字符串（你要绑定的事件）和一个函数（如上）......

使用以下内容：

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


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

希望有帮助:)

于 2011-02-09T00:55:51.033 回答
3

尝试：

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

......而不必用很多ids 来吹嘘。

于 2011-02-09T00:55:55.667 回答
2

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

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

这是一个通用代码示例：

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

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

于 2011-02-09T01:06:23.627 回答
0

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

function Foo(){

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

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

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

于 2011-02-09T01:06:55.337 回答