JQueryでイベントをバインド、アンバインド、リバインド（クリック）する方法

Question

2週間前に同じ質問をした後、here、私はついに「the」ソリューションを見つけました。これが私自身の質問に答える理由です。 ;）

JQUERYでのイベントのバインドを解除したり再バインドする方法はありますか。

Answer 1

これは完璧な解決策です。 （私にとっては少なくとも）

$(document).on('click', 'a#button', function(){ 
    $(this).after('<span> hello</span>'); 
    $('span').fadeOut(1000); 
}); 

$('a#toggle').toggle(
    function(){ 
     $(this).text('rebind'); 
     $('a#button').on('click.disabled', false); 
    }, 
    function(){ 
     $(this).text('unbind'); 
     $('a#button').off('click.disabled'); 
    } 
); 

".on（）"それです。注：1行目のようにイベントをバインドすることは重要です！ .click（）や...で動作しません！

docsを参照してください。

Here is a fiddle試して試してみてください！

お楽しみください！

Answer 2

この関数はjQueryを拡張して、.onと同じイベントハンドラを付加する演算子を含めるようにしました。さらに、与えられたハンドラの複数のインスタンスが複数のセレクタにアタッチされることを防ぎます。

イベントハンドラを削除して再接続すると、関連付けられている順序が変更されることに注意してください。

(function ($) { 
    $.fn.reBind = function(events, handler) { 
     return this.off(events, handler).on(events, handler); 
    }; 
}(jQuery)); 

Answer 3

バインドを解除したい場合はオブジェクトにクラスを追加し、このクラスを削除して元に戻します。

$('#button').click(function(){ 
    if($(this).hasClass('unbinded')) return; 
    //Do somthing 
}); 

$('#toggle').click(function(){ 
    $('#button').toggleClass('unbinded'); 
});