單擊子元素

Question

我想觸發<i>標簽的點擊事件。 我在上面添加了一個ID，但如果嘗試使用：

$("#delete-playlist-song").on("click", function() {
    console.log("in"); //doesnt trigger
});

它不會觸發，所以我想嘗試另一種方法？ 就像是：

$("master-playlist-entries").find("i.pl-action").on("click", function() {
    console.log("in"); //Won't work
});

我的HTML代碼：

<ul id="master-playlist-entries" class="database">
<li id="db-" track-name="James Darren -  Goodbye Cruel World" data-path="http://example.com/Cruel%20World.mp3" class="active">
<i style="display:none;" class="fa fa-bars db-action" title="Actions" data-toggle="modal" data-target="#modal"></i>
<i id="delete-playlist-song" class="fa fa-times pl-action" title="Remove Song From Playlist"></i>
<i class="fa fa-music db-icon"></i><span class="sn"> Goodbye Cruel World</span> <span class="bl">James Darren</span></li>
</ul>

我嘗試過的是一個onclick事件來調用一個有效的函數，但是您看到的是，我想獲取數據路徑信息並將其傳遞給該函數，以便可以使用： $(this).attr("data-path")每次都會為不同的li返回一個不同的鏈接。

任何幫助將不勝感激！

Answer 1

我想您的html是動態添加的-因此，使用此動態注冊點擊偵聽器：

$("body").on("click", "#delete-playlist-song", function() {

為了獲取屬性data-path ，可以在偵聽器內部使用$(this).closest('li').attr("data-path") 。

請參見下面的演示：

 $("body").on("click", "#delete-playlist-song", function() { console.log($(this).closest('li').attr("data-path")); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"> <ul id="master-playlist-entries" class="database"> <li id="db-" track-name="James Darren - Goodbye Cruel World" data-path="http://example.com/Cruel%20World.mp3" class="active"> <i style="display:none;" class="fa fa-bars db-action" title="Actions" data-toggle="modal" data-target="#modal"></i> <i id="delete-playlist-song" class="fa fa-times pl-action" title="Remove Song From Playlist"></i> <i class="fa fa-music db-icon"></i><span class="sn"> Goodbye Cruel World</span> <span class="bl">James Darren</span> </li> </ul> 

Answer 2

您的原始代碼可在一個單獨的代碼段中運行，即https://jsfiddle.net/TrueBlueAussie/6qhhyxs7/，因此我不得不猜測您的示例不完整：

它沒有顯示，但我想您可能有多個具有相同ID的<i>元素（例如id="delete-playlist-song ）。如果是這種情況，它將僅會找到第一個元素，因為瀏覽器會使用一種快速查找緩存，每個ID值只能存儲一個元素，ID在HTML頁面上必須是唯一的work屬性。

切換為使用類，並使用委托的事件處理程序。 https://jsfiddle.net/TrueBlueAussie/6qhhyxs7/1/

例如

$(document).on('click', '.delete-playlist-song', function() {
  $(this).closest('li').slideUp();
});

筆記：

• 您應該將委托的事件處理程序連接到一個不變的祖先元素，但是如果沒有其他條件關閉， document是最好的默認設置。 不要使用body因為它與樣式有關，可能會導致鼠標事件無法觸發的錯誤。 將document用作您的友好備份，因為它在DOM准備就緒之前也存在。