javascript - 如何将 'toggle'事件绑定(bind)到元素

有没有一种方法可以将'bind'语法用于'toggle'事件处理程序？

从文档中，我可以了解到正确的方法是

$('.selector').toggle( function() {}, function() {} );

我的问题是由于某种原因我要删除该元素，然后再次将其添加到DOM中。再次添加时，切换开关不起作用。

因此，我认为应该有一种“绑定(bind)”切换的方法。

请帮助。

这是我正在关注的文档:
http://jqapi.com/#p=toggle

最佳答案

您必须使用 .live() 或 .delegate() 将处理程序添加到现在所有和将来的元素中。

问题是 .toggle() 绑定(bind)了点击，在复杂的情况下，例如使用 .live() 或 .delegate() ，您必须自己制作。从jQuery Docs:



滚动自己的切换(可以使用mod N而不是mod 2轻松地将其扩展到N个切换函数-但随后您必须使用开关而不是JS条件运算符):

var counter = 1;
$('.selector').live("click", function() {
    counter++ % 2 ?
        // First set of actions :
        // Second set of actions;
});

如果要包括2个函数，则它们必须是自执行的。这对于在...中传递参数将是很好的，因此形式为:

var counter = 1;
$('.selector').live("click", function() {
    counter++ % 2 ?
        (function() { ... }()) :                            // <== First function
        (function() { ... }());                            // <== Second function
});

一个简单的示例(不使用参数):

(function() {
    var counter = 1;
    $('.selector').live("click", function() {
        counter++ % 2 ?
            $("div").html("First one!") :
            $("div").html("Numero dos!");

        });
    $(function() {
        $("body").prepend('<input type="button" ' +
                          'class="selector" value=" Click Me! " />');
    });
}());

try it out on jsFiddle

一个更复杂的示例(使用参数):

(function() {
    var counter = 1;
    $('.selector').live("click", function() {
        // Note that the self executing functions are only
        // necessary if you want to use arguments.
        counter++ % 2 ?
            (function() {
                $("div").html("First one! Num: " + ($(event.target).index() + 1))
            }(event)) :
            (function() {
                $("div").html("Numero dos! Num: " + ($(event.target).index()+1))
            }(event));
        });
    $(function() {
        $elie = $('<input type="button" class="selector" value="Click Me!" />');
        $elie.clone().prependTo("body");
        $elie.clone().prependTo("body");
        $elie.clone().prependTo("body");
    });
}());

try it out on jsFiddle

关于javascript - 如何将 'toggle'事件绑定(bind)到元素，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/3854678/