Javascript 单击以查找子元素

我想为我的

标签触发一个点击事件。我添加了一个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（“数据路径”）

，它将为不同的

li

每次返回不同的链接

---

任何帮助都将不胜感激

我猜您的html是动态添加的-因此使用以下命令动态注册单击侦听器：

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

要获取属性

数据路径

，您可以在侦听器中使用

$（this）.nest（'li'）.attr（“数据路径”）

请参见下面的演示：

$（“body”）。在（“单击”，“删除播放列表歌曲”，函数（）{
log（$（this）.closest（'li'）.attr（“数据路径”）；
});



再见残酷的世界詹姆斯·达伦

您的原始代码在一个项目片段中工作，因此我不得不猜测，因为您的示例不完整：

它没有显示，但我猜您有多个具有相同id的
元素（例如
id=“delete playlist song
）。如果是这种情况，它将无法找到除第一个之外的任何元素，因为浏览器使用快速查找缓存，该缓存只能针对每个ID值存储一个元素。ID在HTML页面上必须是唯一的才能工作属性

改为使用类，并使用委派的事件处理程序。

e、 g

注:


您应该将委派的事件处理程序连接到一个未更改的祖先元素，但如果没有其他元素，则最好使用
文档
。不要使用
正文
，因为它与样式有关，可能会导致鼠标事件不触发。使用
文档
作为友好备份，因为它在DOM就绪之前也存在。
您的原始代码在一个单独的示例中运行良好，因此我怀疑上面的示例没有显示问题。请显示其余代码和更大的HTML示例（例如，如果有多个选项）。原始版本实际上是独立工作的，因此问题没有显示出来。效果很好！！谢谢百万分之一你是对的，如果有多个
id
s，那么重复的
id
s就会出现问题。@irishwill200:是的。这是一个严重的问题。添加了解释。谢谢你提供的信息！很遗憾，我必须接受o现在有了答案，因为它解决了id问题等。谢谢@kukkuz的回答！我学到了一些东西，接受了！我不认为使用类是有效的方法，但我编辑了我的设计，现在利用了这些信息！谢谢。@irishwill200:在现代浏览器上，基于类的jQuery选择器几乎和id选择器一样快。它们是为类和ID访问指定了参数。
$(document).on('click', '.delete-playlist-song', function() {
  $(this).closest('li').slideUp();
});