jquery - 相互に要素を持つ .live("click" を使用するときに 1 つの要素のみを参照する方法は?

Question

次のコードがあるとします。

<div id="outerrt">
  <div id="rt" style="width: 200px; height: 200px; border: 1px solid black;">
    <span id="rt2">content</span>
  </div>
</div>

そして、私は以下を使用します：

$("#outerrt *").live("click", function () {
  alert($(this).attr('id'));
});

テキストをクリックするcontentと、次の順序で 3 つの警告ウィンドウが表示されます。

rt2

rt

outerrt

私が実際に与えてほしいのは、ただ 1 つの id:rt2です。どうすればそれを達成できますか?

score 1 · Accepted Answer

実際には、#outerrt *セレクターが要素と一致しないため、最初の 2 つのアラートのみが表示されid="outerrt"ます。

イベントのバブリングを停止するには、次のstopPropagationメソッドを使用します。

$("#outerrt *").live("click", function (e) {
  e.stopPropagation();
  alert($(this).attr('id'));
});

jQuery の新しいバージョンでは、メソッドliveとdelegateメソッドは非推奨になり、すべての機能がメソッドに詰め込まれているonため、同等のコードは次のようになります。

$("body").on("click", "#outerrt *", function (e) {
  e.stopPropagation();
  alert($(this).attr('id'));
});

ただし、デリゲートは、イベントをキャッチしたい要素、つまりコンテンツをロードする要素のできるだけ近くに配置する必要があります。例：

$("#outerrt").on("click", "*", function (e) {
  e.stopPropagation();
  alert($(this).attr('id'));
});

score 1 · Accepted Answer

これは、あなたの望むことですか？

$("#rt2").live("click", function () {
  alert($(this).attr('id'));
});

score 1 · Accepted Answer

$('#outerrt').on( 'click', '#rt', function() {
  alert($(this).attr('id'));
});

編集: $(this) は $(e.target) と同様に機能します

score 1 · Accepted Answer

targetオブジェクトのプロパティを使用できeventます。

$(document).on("click", '#outerrt', function(event) {
      alert(event.target.id);
      // $(event.target).attr('id')
});

score 0 · Accepted Answer

#rt2 に直接バインドするか、代わりに or を使用delegateしonます (jQuery のバージョンによって異なります)。

を使用するdelegateと、より具体的なセレクターを渡すことができます。

$("#outerrt *").delegate("span","click", function () {
  alert($(this).attr('id'));
});

同様にon：

$("#outerrt").on("click", "#rt2", function(event){
  alert($(this).attr('id'));
});

どちらの場合も、より具体的なセレクター (spanまたは#rt2) は、そのセレクターに一致するものでクリックが発生した場合にのみトリガーされることを意味します。

5 に答える 5