Question

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

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

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

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

Answer 1

您需要使用事件的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"));
});

Answer 2

试试这个：

$(document).ready(function(){

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

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

    })

})

最终代码：

＆＃13;

<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>

＆＃13;

Answer 3

你不应该在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'));
});

Jquery在委派的事件上获得被点击的元素

3 个答案: