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

^^应该做你想做的事。

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

目前我们真正了解您的设计的是您使用click事件处理程序来切换标签。那部分很棒，但我们需要更多信息来为您提供您真正想要的更深层次的答案。如果您在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;
}

要创建'class'的实例方法，请使用prototype属性。然而我刚刚意识到我已经超级偏离主题了。详细了解here和here。：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 s来解决问题。

Answer 5

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

我认为标签都在一个公共容器中。如果是这样，只需使用delegate()^(docs)方法在容器上放置处理程序。

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

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

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

Answer 6

添加括号会调用该函数，但是如果你想让它变得很酷，那么你就可以让Foo返回函数进行绑定。

function Foo(){

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

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

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

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

6 个答案: