Jquery在委托事件上获得点击元素
Jquery get clicked element on delegated event
我见过类似的问题，但他们没有解决这个问题。我有一个看起来像这样的 html：
|
1
|
<i>
|
所以，在委托事件触发后，我想获取 元素。但是 $(this) 表示父 元素。
|
1
2 3 |
$("#products").on("click",".delete_product", function(){
console.log($(this).hasClass(".delete_product")); } |
当然，控制台记录错误。如何获得点击的元素？
$(this).find(".delete_product") 不是一个选项，因为 delete_product 类有很多元素。
相关讨论
- 您可以使用 var 声明。 var that = $(this).find(.delete_product); 在函数内部，并且您将在变量中拥有该按钮。还是我错了？
- @Mardzis 不能这样做，因为 .delete_product 类有很多元素。
- $(this) 应该是您的链接
- 所以也许 $(#products .delete_product) ？
您需要使用事件的目标属性。这是代码，它将为您提供确切的 .delete_product.
|
1
2 3 4 5 |
$("#products").on("click",".delete_product", function (ev) {
var $t = $(ev.target); $t = $t.is('.delete_product') ? $t : $t.parents('.delete_product'); console.log($t.hasClass("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>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")); }) }) |
您不应该在 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')); }); |
相关讨论
- 否决投票者可以解释问题是什么吗？