jQueryは、イベント機能をクリックして解除し、状況に応じて再接続します。

Question

以下のコードを使用してスライドメニューを作成します。私は、クリックイベントにアタッチされた関数をアンバインドし、別の時間に再アタッチする方法を知る必要があります。

$(document).ready(function(){ 
    $('.section').hide(); 
    $('.header').click(function(){ 
     if($(this).next('.section').is(':visible')) 
     { 
     $('.section:visible').slideUp()    
     $('.arrows:visible').attr("src","right.gif") 
     } 
     else 
     { 
     $('.section').slideUp(); 
     $(this).next('.section').slideToggle(); 
     $(this).find('.arrows').attr("src","down.gif") 
    }); 
}); 

（jQueryの1.7.2を使用して）次のコードは、私がこれまで

Answer 1

単に名前付き関数を作成します。ここではローテクに戻り、基本に戻って特定のイベントのバインドを解除して再接続することができます。

function doStuff() 
{ 
    if($(this).,next('.section').is(':visible')) 
     ... 
} 

$('.header').on('click', doStuff); 
$('.header').off('click', doStuff); 

Answer 2

代わりのアンバインドと再バインド

$('#printVers').click(function(){ 
    if($('#formVersion').val() != "Print") 
    { 
    $('.header').unbind('click'); 
    } 
    else 
    { 
    //else re-attach functionality? 
    } 
}); 

おかげで、私はあなたが簡単なを追加することを提案したものですクラスを.headerに設定し、クリックハンドラでクラスを確認します。任意の関数をバインド/あなたがアンバインドし、バインドを持つことを主張した場合、その後、あなたが関数にハンドラを移動し、アンバインドすることができます

$('.header').click(function(){ 
    if ($(this).hasClass('dontClick')) { 
     return false; 
    } 
    //rest of your code 

に、

$('#printVers').click(function(){ 
    if($('#formVersion').val() != "Print") 
    { 
    $('.header').addClass('dontClick'); 
    } else { 
    $('.header').removeClass('dontClick'); 
    } 
}); 

そして、あなたの.headerクリックハンドラでは、以下を参照してください時間数..

Answer 3

トップセクションを関数にしてから、else文で呼び出すのはなぜでしょうか？

Answer 4

あなたは、分離機能に.click下

function headerClick(){ 
    if($(this).next('.section').is(':visible')) 
    { 
    $('.section:visible').slideUp()    
    $('.arrows:visible').attr("src","right.gif") 
    } 
    else 
    { 
    $('.section').slideUp(); 
    $(this).next('.section').slideToggle(); 
    $(this).find('.arrows').attr("src","down.gif") 
    } 
} 

をすべてのコードを配置し、このようにそれをバインドすることができます：

$(document).ready(function(){ 
    $('.section').hide(); 
    $('.header').click(headerClick); 
}); 

$('#printVers').click(function(){ 
    if($('#formVersion').val() != "Print") 
    { 
     $('.header').unbind('click'); 
    } 
    else 
    { 
     $('.header').click(headerClick); 
    } 
}); 

Answer 5

あなたはこのような何かを試すことができます。

$('#printVers').click(function(){ 
    if($('#formVersion').val() != "Print") 
    { 
     $('.header').addClass('clickDisabled'); 
    } 
    else 
    { 
     $('.header').removeClass('clickDisabled'); 
    } 
}); 

このクラスのクリックハンドラチェックでは、

$(document).ready(function(){ 
    $('.section').hide(); 
    $('.header').click(function(){ 
     if(!$(this).hasClass('clickDisabled')){ 
      ... 
      ... 
     } 
    }); 
}); 

Answer 6

変数をフラグとして設定できます。 var canClick = ($('#formVersion').val() != 'Print');次に、.header要素のクリックハンドラで、コードを実行する前にcanClickがtrueであるかどうかを確認します。

ハンドラを削除したい場合は、イベントオブジェクトを変数に割り当てることができます。 var eventObj = #('.header').data('events');これは、そのオブジェクトに割り当てられたすべてのハンドラを持つオブジェクトを提供します。クリックイベントを再割り当てするには、$('.header').bind('click', eventObj.click[0]);

Answer 7

バインドで固く試した後、アンバインド、オン、オフ、クリック、アタッチ、removeAttr、propを作成しました。 私は次のようなシナリオを持っています。私のHTMLでは、インラインのonclickハンドラを添付していません。私は次のように使用されるJavaScriptから、後の時点でこれを削除するには

$(element).attr('onclick','myFunction()'); 

：

は、その後、私はJavaScriptで私は、インラインのonclickハンドラを追加するには、次を使用

$(element).prop('onclick',null); 

これは、 Javascriptでクリックイベントを動的にバインドしたりアンバインドしたりするのに役立ちました。あなたの要素にインラインonclickハンドラを挿入しないでください。