.click（）関数内で.live（ 'click'）を使用すると、自分自身がトリガーされます

Question

divをクリックした後に、$('body').live('click')リスナーを追加しようとしています。目的は、ユーザーがページ上の任意の場所をクリックすることで開くことができ、最終的に閉じることができるカスタムのドロップダウンボックスを作成することです。

しかし、私は.click()関数内.live()または.bind()機能を追加した場合、live()機能が何らかの理由でトリガーされます。

$('#myDiv').click(function(){ 
    $('#myDiv .child').show().addClass('showing'); 
    $('body').live('click', function(){ 
      $('#myDiv .child').hide(); 
      $('body').die(); 
    }) 
}) 

#myDivを示したが、すぐに非表示になり、長引く.showingクラスによって証明されます。

私はlive()を使用していますか？この再帰を避けるにはどうしたらいいですか？

Answer 1

return falseイベント伝播を停止します。

$('#myDiv').click(function(){ 
    $('#myDiv .child').show().addClass('showing'); 
    $('body').live('click', function(){ 
      $('#myDiv .child').hide(); 
      $('body').die(); 
    }); 
    return false; 
}) 

Answer 2

利用ライブせずに結合第2の本体クリック（も、あなたがそれ常にページであるため、それを必要としない）、タイムアウトを使用します。

$('#myDiv').on('click',function(){ 
    $('#myDiv .child').show().addClass('showing'); 
setTimeout(function(){ 
$('body').on('click', function(){ 
      $('#myDiv .child').hide(); 
      $('body').off('click'); 
    }); 
},0); 

}); 

Answer 3

多分それは多分それはいけない、動作するはずです。しかし、それはしません。最初にすべてのイベントハンドラを設定し、2番目のイベントハンドラが実際に応答するかどうかを追跡するグローバル変数（例）を設定することをおすすめします。

Answer 4

現在のイベントの伝播を停止して、新しいイベントハンドラが表示するボディにバブリングしないようにする必要があります。さらに、1つのタイムイベントハンドラの.one()を使用することができます。

$('#myDiv').on('click',function(e){ 
    $('#myDiv .child').show().addClass('showing'); 
    e.stopPropagation(); 
    $(document.body).one('click', function() { 
      $('#myDiv .child').hide(); 
    }); 
})