1

この状況.on()での代わりに、それを使用する方法と使用方法に問題があります。.bind()ここで私がやろうとしているのは、リンクをクリックすることです。それは別のクリックイベントをバインドすることを想定していますが、代わりにそのイベントをすぐにトリガーします。私はドキュメンテーション/jquery.jsファイルを調べましたが、これが私がそれを行うと思われる方法です。

デモ: http://jsfiddle.net/bNaFV/

$('#click_me').on('click', function(){    
    $('#show_me').addClass('remain');

    //this is only suppose to bind that next time i click anywhere on the document it should hide
    // not right away
    $(document).on('click', 'html', function(){
      $('#show_me').hide();        
    });
});

$("#click_me").hover(
  function () {
    $('#show_me').show();
  }, 
  function () {
      if ($('#show_me').hasClass('remain')){
           return;   
      } else {
          $('#show_me').hide();   
      }
  }
);



<a href="#" id="click_me">click me</a><br /><br />

<div id="show_me"></div>​
4

1 に答える 1

8

イベントの伝播を停止する必要があります。

$('#click_me').on('click', function(e){    
    e.stopPropagation(); //Stop the event from bubbling further
    $('#show_me').addClass('remain');
    $(document).on('click', 'html', function(){
        $('#show_me').hide();        
    });
});

これは、#click_me要素でイベントがキャプチャされたためです。次に、同じイベント タイプのイベント ハンドラーを DOM ツリーの上位にバインドします。その後、イベントはツリーをバブリングし続けて に到達しdocument、そこで新しいイベント ハンドラーをトリガーします。

これが実際の例です。

更新(コメントを参照)

コメントで @zerkms が指摘したように、イベント ハンドラーをdocument1 回だけバインドする必要があると思います。メソッドを使用してそうすることができますone。これは、一度実行された後にイベント ハンドラーをバインド解除します。

$(document).one('click', 'html', function(){
    $('#show_me').hide();        
});
于 2012-05-18T07:09:35.543 に答える