web-dev-qa-db-ja.com

JQueryでイベントをバインド、バインド解除、および再バインド(クリック)する方法

2週間前に同じ質問をした後 here で、ようやく "the"ソリューションが見つかりました。これが私が自分の質問に答えている理由です。 ;)

JQUERYでイベントをバインド、アンバインド、再バインドする方法

13
John Doe Smith

そして、これは完璧なソリューションです。 (少なくとも私にとっては。)

$(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 を参照してください!

これがフィドルです 試してみて、実験してみてください!

楽しい!

12
John Doe Smith

より簡単で短い解決策は、バインドを解除する場合はオブジェクトにクラスを追加してから、このクラスを削除してexを再バインドすることです。

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

$('#toggle').click(function(){
    $('#button').toggleClass('unbinded');
 });
3
Wessam El Mahdy