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>

其中.elements' 是动态呈现的。

所以我为这些元素编写了处理程序：

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');
  });
});