javascript - javascriptのon()関数で動的要素を指定するには?

Question

私はほぼそのような構造を持っています:

<div class='container'>
 <div class='element' data-id='1'></div>
 <div class='element' data-id='2'></div>
 <div class='element' data-id='2'></div>
</div>

.elementが動的にレンダリングされる場所。

したがって、これらの要素のハンドラーを作成しました。

jQuery('.container').on('click', '.element', function () { //code })

しかし、クリックされた要素で何かをする必要があります。

クリックされた要素を取得するにはどうすればよいですか?

Answer 1

クリックされた要素はthis、イベント ハンドラー関数になります。

jQuery('.container').on('click', '.element', function () { 
    // use "this" or "jQuery(this)", depending on your needs
})

thisあなたの場合は DOM 要素を指すことに注意してください<div>。

Answer 2

イベントのターゲットで何かをしなければなりません。

何かのようなもの ：

jQuery('.container').on('click', '.element', function (event) { 
    var clickedelement = $(event.target);
    //code 
})

Answer 3

HTML:

<div class='container'>
 <div class='element' data-id='1'/>
 <div class='element' data-id='2'/>
 <div class='element' data-id='2'/>
</div>

Javascript:

$(function () {
  $('.container').on('click', '.element', function () {
    $clickedElement = $(this);
    $data-id = $clickedElement.attr('data-id');
  });
});