在事件上使用jQuery获得点击的元素？

84

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

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

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

例如：

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

— 魔鬼代言人
source

114

尽可能简单

也用$(this)在这里

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

— 比彭
source

看起来我正在处理服务器的缓存问题。抱歉。

— 魔鬼的拥护者

53

对使用ES6的人员的警告。箭头功能未设置“ this”，因此它将成为父级。因此，基本上不要在这里使用箭头功能。

— thomas-peter

4

@ thomas-peter我说你把它变成了答案

— 杰克

2

@ thomas-peter节省了我数十分钟的沮丧时间，谢谢。

— 米兰Velebit，

1

@ thomas-peter，你救了我！我试图弄清楚为什么它在30分钟内都没醒来……谢谢！

— kriskotoo BG

53

您缺少函数上的事件参数。

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

— 巴斯蒂安·朗
source

6

这对我来说是完美的。它给出了被单击的元素-$（this）仅给出了附加了事件的元素。

— 比尔·塔贝尔

这是完美的方法。谢谢:)

— Swetabja Hazra

34

传统的处理方式在ES6中效果不佳。您可以改为：

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

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

请注意，事件目标将是clicked元素，该元素可能不是您想要的元素（它可能是接收事件的孩子）。获取实际元素：

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

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

— 华夫饼干
source

0

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

— 亚农索
source