イベントでjQueryを使用してクリックされた要素を取得しますか？

85

次のコードを使用して、動的に生成されたボタンがクリックされたことを検出しています。

$(document).on("click",".appDetails", function () {
    alert("test");
});

通常、実行した場合は、クリックされた要素を取得するために$('.appDetails').click()使用でき$(this)ます。上記のコードでこれをどのように達成しますか？

例えば：

$(document).on("click",".appDetails", function () {
    var clickedBtnID = ??????
    alert('you clicked on button #' + clickedBtnID);
});

— 悪魔の擁護者
ソース

115

できるだけシンプル

$(this)ここでも使用してください

$(document).on("click",".appDetails", function () {
   var clickedBtnID = $(this).attr('id'); // or var clickedBtnID = this.id
   alert('you clicked on button #' + clickedBtnID);
});

— バイペン
ソース

1

サーバーからのキャッシュの問題を扱っているようです。ごめんなさい。

— 悪魔の代弁者

55

ES6を使用している人への警告。矢印関数は「this」を設定しないため、これが親になります。したがって、基本的にここでは矢印関数を使用しないでください。

— thomas-peter 2016

4

@ thomas-peter私はあなたがそれを答えに変えると言います

— ジャック

2

@ thomas-peter何十分もの欲求不満を解消してくれて、ありがとう。

— Milan Velebit 2018年

1

@ thomas-ピーターあなたは私を救った！なぜ30分も起きなかったのか理解しようとしていた…ありがとう！

— kriskotooBG20年

54

関数にイベントパラメータがありません。

$(document).on("click",".appDetails", function (event) {
    alert(event.target.id);
});

— バスティアン・ラング
ソース

6

これは私にとって完璧でした。クリックされた要素を提供します-$（this）は、イベントがアタッチされた要素のみを提供します。

— ビルターベル2015

これは完璧な方法です。ありがとう：）

— SwetabjaHazra20年

34

これを処理する従来の方法は、ES6ではうまく機能しません。代わりにこれを行うことができます：

$('.delete').on('click', event => {
  const clickedElement = $(event.target);

  this.delete(clickedElement.data('id'));
});

イベントターゲットはクリックされた要素であることに注意してください。これは必要な要素ではない可能性があります（イベントを受信した子である可能性があります）。実際の要素を取得するには：

$('.delete').on('click', event => {
  const clickedElement = $(event.target);
  const targetElement = clickedElement.closest('.delete');

  this.delete(targetElement.data('id'));
});

— ワッフル
ソース

0

簡単な方法は、データ属性をHTMLタグに渡すことです。

例：

<div data-id='tagid' class="clickElem"></div>

<script>
$(document).on("click",".appDetails", function () {
   var clickedBtnID = $(this).attr('data');
   alert('you clicked on button #' + clickedBtnID);
});
</script>

— iamnonso
ソース