点击子元素

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") 这将return 每次 link 不同 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/ 所以我不得不猜测，因为您的示例不完整：

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

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

例如

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

备注：

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

点击子元素

On click for child element

html

javascript

jquery

jquery-selectors

font-awesome