Nhận phần tử được nhấp bằng cách sử dụng jQuery trên sự kiện?

Tôi đang sử dụng mã sau để phát hiện khi nào một nút được tạo động được nhấp vào.

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

Thông thường, nếu bạn vừa làm, $('.appDetails').click()bạn có thể sử dụng $(this)để lấy phần tử được nhấp vào. Tôi sẽ thực hiện điều này như thế nào với đoạn mã trên?

Ví dụ:

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

Đơn giản nhất có thể

Sử dụng luôn $(this)ở đây

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

Bạn đang thiếu thông số sự kiện trên hàm của mình.

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

Cách xử lý thông thường này không hoạt động tốt với ES6. Bạn có thể làm điều này thay thế:

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

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

Lưu ý rằng mục tiêu sự kiện sẽ là phần tử được nhấp, có thể không phải là phần tử bạn muốn (nó có thể là phần tử con đã nhận sự kiện). Để có được phần tử thực tế:

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

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

Một cách đơn giản là chuyển thuộc tính data vào thẻ HTML của bạn.

Thí dụ:

<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>