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在委託事件上獲得點擊元素

回答

相關問題