在事件上使用jQuery获取单击的元素

Question

我使用以下代码来检测何时单击了动态生成的按钮。

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

通常情况下，如果你只做了$('.appDetails').click()，你可以使用$(this)来获得被点击的元素。我如何用上面的代码来实现这一点？

例如：

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

Answer 1

尽可能简单的

此处也使用$(this)

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

Answer 2

函数中缺少事件参数。

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

Answer 3

传统的处理方式在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'));
});

Answer 4

有很多方法可以实现

第一种方法是使用javascript目标

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

Answer 5

$(".masonry__img").click((e) => {
      console.log(e.currentTarget.currentSrc);
});

这将为每个具有类masary_img的图像添加一个onClick处理程序。

Answer 6

一个简单的方法是将数据属性传递给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>