如何将'toggle'事件绑定到元素

Question

有没有办法可以为'toggle'事件处理程序使用'bind'语法？

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

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

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

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

请帮助。

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

Answer 1

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

问题是 .toggle() 会对点击进行绑定，在复杂的情况下，例如使用 .live() 或 .delegate() 你必须自己制作。来自jQuery Docs：

  

提供.toggle（）方法是为了方便起见。手动实现相同的行为是相对简单的，如果.toggle（）中内置的假设证明是有限的，那么这是必要的。

滚动你自己的切换（这可以使用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

Answer 2

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

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

Answer 3

参考： .bind ， .trigger

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

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

Answer 4

尝试使用实时功能。这是文档。 link text

希望它会对你有所帮助。