如何將'toggle'事件綁定到元素

Question

有沒有辦法可以為'toggle'事件處理程序使用'bind'語法？

從文檔我可以理解，正確的方法是

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

我的問題是我出於某種原因刪除了該元素，然后再將其添加到DOM中。 再次添加時，切換不起作用。

因此，我認為應該有一種方法來“綁定”切換。

請幫助。

這是我關注的文檔： http ： //jqapi.com/#p=toggle

Answer 1

您必須使用.live()或.delegate()向所有現在和將來的元素添加處理程序。

問題是.toggle()綁定了click，在復雜的情況下，比如使用.live()或.delegate()你必須創建自己的。 來自jQuery文檔：

提供.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! " />');
    });
}());

在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上嘗試一下

Answer 2

我的問題是我出於某種原因刪除了該元素，然后再將其添加到DOM中。 再次添加時，切換不起作用。

我認為，這取決於你如何刪除元素。 如果使用remove函數，則也將從元素中刪除所有事件和jquery數據。 它與分離功能相反，因此非常適合刪除計划在以后插入文檔的元素。

Answer 3

參考 ： .bind ， .trigger

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

試試示例： http ： //jsbin.com/ixapo4/2

Answer 4

嘗試使用實時功能。 這是文檔。 鏈接文字

希望它會對你有所幫助。