javascript - 点击子元素

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

您的原始代码适用于单项代码段，https://jsfiddle.net/TrueBlueAussie/6qhhyxs7/所以我不得不猜测，因为你的例子不完整:

它没有显示，但我猜你有多个 <i>具有相同 id 的元素(例如 id="delete-playlist-song )。如果是这种情况，除了第一个，它根本找不到任何其他元素，因为浏览器使用快速查找缓存，它只能针对每个 ID 值存储一个元素。 ID 在 HTML 页面上必须是唯一的才能工作。

改为使用类并使用委托(delegate)的事件处理程序。 https://jsfiddle.net/TrueBlueAussie/6qhhyxs7/1/

例如

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

注意事项:

• 您应该将委托(delegate)的事件处理程序连接到一个不变的祖先元素，但是document如果没有其他接近的话，是最好的默认值。不要使用 body因为它有一个与样式有关的错误，可能导致鼠标事件不触发。使用 document作为您的友好备份，因为它在 DOM 准备就绪之前也存在。