如何绑定“切换”按钮事件到元素

Question

有没有办法可以将“绑定”语法用于“切换”事件处理程序？

从文档中我可以理解正确的方法是

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

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

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

请帮忙。

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

Answer 1

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

我认为，这取决于您删除元素的具体方式。如果您使用 remove 函数，所有事件和 jquery 数据也将从元素中删除。它与 detach 函数相反，非常适合删除您计划稍后插入回文档中的元素。

Answer 2

参考 : .bind , .trigger

$(function() {
  $('input').click(function() {
    $('#id').trigger('toggle')
  });
    $('#id').bind('toggle', function() {
       $(this).toggle()
    });
});

尝试示例：http://jsbin.com/ixapo4/2

Answer 3

尝试使用 live 功能。这是文档。 链接文本

希望对您有所帮助。

Answer 4

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

问题是 .toggle()绑定点击，在复杂的情况下，例如使用 .live() 或 .delegate()< /strong>你必须自己做。来自 jQuery 文档：

提供.toggle()方法是为了方便。手动实现相同的行为相对简单，如果 .toggle() 中内置的假设被证明是有限制的，那么这可能是必要的。

滚动你自己的切换（这可以使用 mod N 而不是 mod 2 轻松扩展到 N 个切换函数 - 但随后你必须使用 switch 而不是 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! " />');
    });
}());

在 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");        
    });
}());

在 jsFiddle 上尝试一下