アンダーレイ要素をunclickable/deactiveにするにはどうすればいいですか？

Question

私はお互いの上に2つの要素を持っています。最初のdivのボタンをクリックすると、2番目のdivが最初のdivの上に開き、下にあるdivを非インタラクティブにすることができます（underlaying-divの何もクリックできませんoverlaying-divが開いている限り）。

Javascriptコード：

$('#button').live('click', function() 
    {  
     $('#underlaying-div).fadeTo("fast", 0.7); 
     $('#overlaying-div).css('display', 'block'); 

     //Do something here to make the underlaying div unclickable 
    }); 

    $("#overlaying-div").live("click", function() { 
    $(this).hide(); 

    $('#underlaying-div).fadeTo("slow", 1.0); 

    //Do something here to make the underlaying div clickable again 
    }); 

CSSコード：

#overlay-div 
{ 
    position:absolute; 
    left:0; 
    top:0; 
    display:none; 
    z-index: 20000;  
} 

私は私はあなたがunderlaying-内の要素をクリックした場合には何も起こらないことを確認するevent.preventDefault（）を使用することができます知っていますdiv、しかし、私はむしろ、あなたがボタンの上にマウスを置いたとき（preventDefault（）、ホバーや他のものが起こっても）何も起こらないことを望んでいます。

CSSやJavaScript/JQueryでこの問題を解決できる他の方法はありますか？

Answer 1

あなたはこのようなクリックイベントハンドラを削除するためにアンバインド使用することができます

$(this).unbind('click'): 

このライブバインドで動作しますが、あなたは、少なくともそれを試してみてください:)の

Answer 2

わからない場合は私の懸念がありますあなたの最終的な製品ですが、下に重なっているdivが上に重なって表示されないような方法で重なっている場合は、display:block;下のdivにすることができます。

Answer 3

なぜjQuery .fadeIn()と.fadeOut()関数を使用しないのですか？ id="div1"とid="div2"という2つの部門があり、div1のボタンとid="button1"のボタンとdiv2のボタンとid="button2"のボタンがあります。 CSSコード：

#div1 { 
    //some CSS code without z-index 
} 

#div2 { 
    //some CSS code without z-index 
    visibility:hidden; 
} 

のjQueryコード：

$('#button1').click(function(){$('#div1').fadeOut('slow', function(){$('#div2').fadeIn()})}) 
$('#button2').click(function(){$('#div2').fadeOut('slow', function(){$('#div1').fadeIn()})}) 

Answer 4

これは非常に古い質問ですが、誰かがそれに発生した場合、あなたはそれが役に立つのポインタイベントのCSSプロパティを切り替えるために見つけるかもしれませんオブジェクトを無効にします。クリックバインディングを手動で削除するか、他のラッパーを追加する必要はありません。オブジェクトが 'none'に設定されたポインタイベントを持つ場合、イベントはクリックされたときには起動しません。 jQueryので

：

$('#underlaying-div).css('pointerEvents', 'none'); // will disable 
$('#underlaying-div).css('pointerEvents', 'auto'); // will reenable