在事件上使用jQuery获取clicked元素？

I'm using the following code to detect when a dynamically generated button is clicked.

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

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

Normally, if you just did $('.appDetails').click() you could use $(this) to get the element that was clicked on. How would I accomplish this with the above code?

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

For instance:

例如：

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

4 个解决方案

#1

As simple as it can be

尽可能简单

Use $(this) here too

在这里也使用$（this）

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

#2

You are missing the event parameter on your function.

您缺少函数的事件参数。

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

#3

The conventional way of handling this doesn't play well with ES6. You can do this instead:

传统的处理方式与ES6不相称。你可以这样做：

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

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

Note that the event target will be the clicked element, which may not be the element you want (it could be a child that received the event). To get the actual element:

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

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

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

#4

-1

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

#1