在事件中使用 jQuery 获取被点击的元素？答案

【问题标题】：Get clicked element using jQuery on event?在事件中使用 jQuery 获取被点击的元素？
【发布时间】：2013-04-18 19:49:08
【问题描述】：

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

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

通常，如果您只是执行$('.appDetails').click()，您可以使用$(this) 来获取被点击的元素。我将如何使用上面的代码完成此操作？

例如：

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

【问题讨论】：

标签： jquery event-handling click jquery-events

【解决方案1】：

尽可能简单

这里也使用$(this)

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

【讨论】：

看起来我正在处理来自服务器的缓存问题。对不起。
警告那些使用 ES6 的人。箭头函数不设置'this'，所以这将是父级。所以，这里基本上不要使用箭头函数。
@thomas-peter 我说你把它变成了答案
@thomas-peter 为我节省了数十分钟的挫败感，谢谢。
@thomas-peter 你刚刚救了我！我试图弄清楚为什么它 30 分钟都没有醒来......谢谢！

【解决方案2】：

您的函数缺少事件参数。

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

【讨论】：

这对我来说是完美的。它给出了被点击的元素 - $(this) 只给出了附加了事件的元素。

【解决方案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'));
});

【讨论】：

您应该使用event.currentTarget 来获取事件绑定的元素。 event.target 确实是触发事件的元素。如果此类有多个嵌套元素，您的代码 clickedElement.closest('.delete'); 可能会失败。

【解决方案4】：

有很多方法可以做到这一点

第一种方法是使用 javascript 目标

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

【讨论】：

【解决方案5】：

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

【讨论】：

这里的 .appDetails 是什么？