javascript - jQuery 在单击时获取数据属性不起作用

Question

我有一个脚本将附加到我的网络应用程序上的两个位置。一个是列表项，另一个是 HTML 表单上的隐藏字段(我在 PHP 服务文件中处理数据)。

但是，我希望如果用户单击“x”图标，则所有具有相同 ID 的元素都会被删除。

我很清楚如何做到这一点，但我下面的脚本甚至没有记录 ID。 .control block 给了我这个问题。 #add 代码块成功附加了 HTML。

我是否遗漏了一些明显的东西？

$("#add").click(function() {

    // RENDER LIST
    var playerList = ""; //
    playerList += "<li class='selection'>" + $("#player").val() + "<i class='fa fa-close control' data-id='" + $("#playerGUID").val() + "'> </i>" + "</li>";

    $(playerList).appendTo("#playerList");

    // ADD GUID TO SUBMISSION VALUES
    var playerHTML = "";
    playerHTML += "<input data-id='" + $("#playerGUID").val() + "' type='hidden' name='playerGUID[]' value='" + $("#playerGUID").val() + "' />";

    $(playerHTML).appendTo("#selected-players");

    // CLEAR INPUT FIELD
    $("#player").val('');
});

$(".control").click(function() {
    $targetID = $(this).attr('data-id');
    console.log("Selected ID:" + $targetID);

    // REMOVE WILL COME HERE
});

Answer 1

$(".control") 在您绑定(bind)点击事件时不存在。您需要像这样委托(delegate)事件:

$(document).on("click", ".control", function() {
    $targetID = $(this).attr('data-id');
    console.log("Selected ID:" + $targetID);
   // REMOVE WILL COME HERE
});

这里发生的情况是，jQuery 将在文档上绑定(bind)一个监听器(该文档始终存在)，而不是 .control，直到您通过单击 # 创建它之后，该监听器才会存在。添加。这样，即使元素本身是稍后添加的，也可以捕获具有 control 类的元素上的事件。

检查jQuery.on在直接事件和委托(delegate)事件下了解更多详细信息。

注意:您可以将事件绑定(bind)到将成为 .control 父级的任何元素上，而不是使用 $(document) ，并且当您绑定(bind)事件时可用(例如 body)。理想情况下，您希望将其绑定(bind)到加载文档时出现的最近的父元素。