Jquery在委托事件上获得点击元素

Jquery get clicked element on delegated event

我见过类似的问题，但他们没有解决这个问题。我有一个看起来像这样的 html：

1	<i class=”fa fa-close”>

所以，在委托事件触发后，我想获取元素。但是 $(this) 表示父元素。

1
2
3

$(“#products”).on(“click”,”.delete_product”, function(){
console.log($(this).hasClass(“.delete_product”));
}

当然，控制台记录错误。如何获得点击的元素？

$(this).find(“.delete_product”) 不是一个选项，因为 delete_product 类有很多元素。

相关讨论

当 a 链接具有子元素(如 Hellothere)时，此操作会失败。当单击这些子元素之一时，目标将不是 a 元素，而这仍然是委托事件处理程序的目的。
是的，这就是我们检查目标是否为 .delete_product 的原因。如果没有，则在该类中找到其父级。假设任何孩子/父母没有类delete_product，这使它成为 children 证明。说得通？ $t = $t.is(.delete_product) ？ $t : $t.parents(.delete_product);这条线使它成为 children 证明。 :)

您添加了 if 并且是的，在该条件下它可以工作，但是 jQuery 已经完成了这项任务……最好利用它。

试试这个：

1
2
3
4
5
6
7
8
9

$(document).ready(function(){

$(“#products”).on(“click”,”.delete_product”, function(){

alert($(this).hasClass(“delete_product”));

})

最终代码：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36

<html>
This is test
<head>
<style>
</style>
</head>
<body>

<i class=”fa fa-close”>Click Me!

<script src=”https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js”>

$(document).ready(function(){

$(“#products”).on(“click”,”.delete_product”, function(){

alert($(this).hasClass(“delete_product”));

})

})

</body>
</html>

您不应该在 hasClass 参数中使用点。它不是选择器，而是您传递的名称：

1
2
3

$(“#products”).on(“click”,”.delete_product”, function(){
console.log($(this).hasClass(‘delete_product’));
});

jQuery 确实提供了与选择器匹配的元素作为 this。如 jQuery 文档中所述：

When jQuery calls a handler, the this keyword is a reference to the element where the event is being delivered; […] for delegated events this is an element matching selector.

仅供参考：当然还有另一种方法，您可以(并且应该)使用选择器(带点)：

1
2
3

$(“#products”).on(“click”,”.delete_product”, function(){
console.log($(this).is(‘.delete_product’));
});

Jquery get clicked element on delegated event

猜你喜欢