Question

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

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

我很清楚如何做到这一点，但我的下面的脚本甚至没有记录ID。 [ { "key" : "CHV", "value" : "Chivas" }, { "key" : "BLN", "value" : "Balentines" }, { "key" : "BDG", "value" : "Black Dog" } ]块给了我这个问题。 <option *ngFor="let item of data; let itemlabel = optionlabel; let itemvalue = optionvalue" value="{{item.itemvalue}}">{{item.itemlabel}}</option>代码块成功附加了HTML。

我错过了一些明显的东西吗？

optionvalue : string = 'key';
optionlabel : string = 'value';

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创建它才会存在。这样，如果可以捕获具有类control的元素上的事件，即使稍后添加了元素本身。

点击直接和委派活动下的jQuery.on了解更多详情。

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

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 个答案: