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

Question

我有一个脚本，它将追加到Web应用程序的两个位置。 一个是列表项，另一个是HTML表单（我处理PHP服务文件中的数据）上的隐藏字段。

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

我有一个很好的主意，但我下面的脚本甚至没有记录ID。 .control块给了我这个问题。 #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

绑定click事件时， $(".control")不存在。 您将需要像这样委派事件：

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

这里发生的是，jQuery将绑定在文档（它总是存在）的监听器，而不是.control ，直到你通过点击到创建它，这将不存在#add 。 这样一来，即使元素本身是在以后添加的，if也可以通过类control来捕获元素上的事件。

有关更多详细信息，请在“ 直接事件和委托事件”下检查jQuery.on 。

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

Answer 2

您正在使用的click()绑定称为直接绑定，它将仅将处理程序附加到已经存在的元素上。 它不会绑定到以后创建的元素。 为此，您必须使用on()方法创建“委托”绑定。

例如。

    <html>
    <head>
    <script src="http://code.jquery.com/jquery-latest.min.js"></script>

    </head>
    <body>

        <div id="playerList">playerList</div>

        <div id="selected-players">selected-players</div>

        <a href="#" id="add">Add</a>

    <script>

        $(document).ready(function(){

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

            // RENDER LIST
            var playerList = ""; //
            playerList += "<li class='selection'>Dynamic LI " + $("#player").val() + "<i class='fa fa-close control' data-id='sample-data-id " + $("#playerGUID").val() + "'> <b>iVal-Click Here</b> </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('');
        });

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

            // REMOVE WILL COME HERE
        });

        });

    </script>   

    </body>
    </html>

Answer 3

试试.on绑定的事件代替.click

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

    // REMOVE WILL COME HERE
});

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

问题描述

3 个解决方案

解决方案1
1 已采纳 2016-05-16 14:15:36

解决方案2
1 2016-05-16 14:32:08

解决方案3
0 2016-05-16 14:12:23

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

问题描述

3 个解决方案

解决方案1 1 已采纳 2016-05-16 14:15:36

解决方案2 1 2016-05-16 14:32:08

解决方案3 0 2016-05-16 14:12:23

解决方案1
1 已采纳 2016-05-16 14:15:36

解决方案2
1 2016-05-16 14:32:08

解决方案3
0 2016-05-16 14:12:23