0

奇妙な問題がある場合は、ここで私を助けてくれることを願っています.

私のJavaScriptコードでは、divを作成します

<div class="..." id="getMoreOfX"><span class="...">More info</span></div>

そしてそのすぐ下に、イベントハンドラーを次のようにアタッチしようとします:

$(document).on('click', '#getMoreOfX', function(){
  alert("Click: " + $(this).attr('id'));
});

エラーはスローされませんが、何もしません。ただし、奇妙なことに、「クリック」を「mouseenter」(または「mouseleave」) に変更するだけで、本来の動作が実行されます。特にこの最後のプロパティは私を混乱させます。

これを引き起こしている可能性のあるものについて何か考えはありますか?

NB jquery のバージョンは 1.7 で、これを FF、Opera、および Chrome でテストしました。

4

1 に答える 1

0

jQuery でのイベント委任は、JavaScript でのイベントが DOM ツリーをたどってドキュメントに到達する (または伝播する) という原則に基づいて機能します。ただし、DOM の下位レベルの要素にイベント ハンドラーがあり、その伝達が発生しないようにする場合 (呼び出しevent.stopPropagation()または呼び出しによって) return false、イベントの委任は機能しなくなります。

たとえば、次の HTML があるとします。

<div id="outer">
  <div id="inner">
    Testing event delegation <br/>
    <input type="button" value="Click me" id="test-button"/>   
  </div>
</div>

次に、次の jQuery を追加します。

$('#outer').on('click', '#inner', function(e) {
  console.log(this.id);
});

次に、その中の任意の場所をクリックすると、コンソールに出力されます<div id="inner">。innerただし、次のイベント ハンドラーをボタンに追加すると:

$('#test-button').click(function(e) {
 return false; 
});

その後、テキストをクリックすると、以前と同様に機能し続けますinner(コンソールに出力されます)。ただし、ボタンをクリックしても、イベントの伝播が妨げられているため、何も出力されません。

これは、この jsFiddleで確認できます。

于 2013-01-09T16:53:00.763 に答える