Jquery 点击事件不再绑定新创建的标签

Jquery click event no longer bound for newly created tags

本文关键字：创建 标签 新创建 事件 不再 绑定 Jquery      更新时间：2023-09-26

请参阅以下内容

小提琴

我正在使用 .on，但似乎点击事件不适用于新创建的项目。新项目如何同时侦听点击事件？

 $("#addNewAddresses").on("click", function () {
        console.log("adding an address");
        var $table = $(this).parent().find("table");
        var html = "<tr  class='item'>";
        html += "<td class='city'>";
        html += "<input id='City' class='inputStylized' type='text' placeholder='City'>";
        html += "</td>";
        html += "  </tr>"
        $(html).appendTo($table);
    });
    $(".city").on("click", function () {
        console.log("city was clicked");
    });

您必须将事件委托给静态最近的父级或document本身，如下所示：

$("#address-table").on("click", ".city", function () {
    console.log("city was clicked");
});

您可以通过以下方式委派给document：

$(document).on("click", ".city", function () {
    console.log("city was clicked");
});

演示小提琴

只需输入：

$(".city").on("click", function () {
    console.log("city was clicked");
});

.appendTo之后，将为新的附加输入设置事件:)

JSFiddle

相关文章：