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

我见过类似的问题，但他们没有解决这个问题。我有一个看起来像这样的HTML：Jquery在委托事件上获得点击元素

<div id="products" class="container-fluid"> 
    <div class="selected_product_div panel panel-default"> 
      <div class="panel-body"> 
       <a style="{cursor: pointer;}" class = "delete_product pull-right"><i class="fa fa-close"></i></a>     
      </div> 
     </div> 
    </div> 
</div>

因此，受委托的事件触发后，我想获得的<a class="delete_product"></a>元素。但$(this)表示父母<div id="products>元素。

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

当然，控制台记录为false。我怎样才能获得点击元素？

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

来源

2016-09-05 alejoss

您可以使用VAR声明它。 'var that = $（this）.find（'。delete_product'）;'在函数内部，并且你将在变量中有该按钮。或者我错了？ – Mardzis

@Mardzis不能那样做，因为'.delete_product'类有很多元素。 – alejoss

'$（this）'应该是你的链接 – putvande

试试这个：

$(document).ready(function(){ 

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

     alert($(this).hasClass("delete_product")); 

    }) 

})

最终代码：

<html> 
 
    <title>This is test</title> 
 
    <head> 
 
     <style> 
 
     </style> 
 
    </head> 
 
    <body> 
 
     
 
     <div id="products" class="container-fluid"> 
 
      
 
      <div class="selected_product_div panel panel-default"> 
 
       
 
        <div class="panel-body"> 
 
         <a class = "delete_product pull-right" href="#"><i class="fa fa-close">Click Me!</i></a>     
 
        </div> 
 
       
 
      </div> 
 
      
 
    </div> 
 
     
 
     <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> 
 
     <script> 
 
      
 
     $(document).ready(function(){ 
 

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

 
       alert($(this).hasClass("delete_product")); 
 

 
      }) 
 

 
     }) 
 
     
 
     </script> 
 
    </body> 
 
</html>

来源

2016-09-05 19:30:45 Ehsan

你不应该在hasClass参数中有点。这不是一个选择，而是一个名字你通过：

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

jQuery的并提供选择作为this匹配的元素。正如在所述的jQuery documentation：

当jQuery的调用处理程序时，this关键字是在正在传送的事件的元素的引用; [...]对于委托事件，这是一个匹配selector的元素。

仅针对信息：当然还有另一种方法，在这里你可以（也应该）使用选择（用点）：

$("#products").on("click",".delete_product", function(){ 
    console.log($(this).is('.delete_product')); 
});

来源

2016-09-05 18:56:32 trincot

请问downvoter是什么问题？ – trincot

你需要使用该事件的target属性。这里是代码，它会给你确切的.delete_product。

$("#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")); 
});

来源

2016-09-05 19:05:39

当'a'链接具有子元素时，失败，如'Hellothere'。当点击位于其中一个子元素上时，目标将不是'a'元素，而这仍然是委派事件处理程序的目的。 – trincot

是的，这就是为什么我们要检查目标是否是.delete_product。如果不是的话，那么找到它是该班的父母。假设任何孩子/父母没有class delete_product，这使得它成为孩子的证明。合理？ ** $ t = $ t.is（'。delete_product'）？ $ t：$ t.parents（'。delete_product'）; **这一行使它成为孩子的证明。 :) –

你添加了'if'和yes，它的工作原理是这样的，但jQuery已经完成了这个任务......最好使用它。 – trincot

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

回答

相关问题