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已动态添加 - 因此请使用以下方式动态注册Click listener ：

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

要获取属性data-path，您可以在侦听器中使用$(this).closest('li').attr("data-path")。

请参阅下面的演示：

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 2

您的原始代码在一个项目代码段https://jsfiddle.net/TrueBlueAussie/6qhhyxs7/中有效，所以我必须猜测，因为您的示例不完整：

未显示，但我猜您有多个具有相同ID的<i>元素（例如id="delete-playlist-song）。如果是这种情况，它除了第一个之外根本找不到任何东西，因为浏览器使用快速查找缓存，该缓存只能针对每个ID值存储一个元素。 ID必须在HTML页面上唯一才能使用属性。

转而使用类，并使用委托事件处理程序。 https://jsfiddle.net/TrueBlueAussie/6qhhyxs7/1/

e.g。

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

注意：

您应该将委派的事件处理程序连接到不变的祖先元素，但如果没有其他任何内容，则document是最佳默认值。不要使用body，因为它与样式有关，可能导致鼠标事件无法触发。使用document作为友好备份，因为它在DOM就绪之前也存在。

单击子元素

2 个答案: