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

Question

请看以下

小提琴

我正在使用 .on 但似乎单击事件不适用于新创建的项目。新项目如何也能监听 on click 事件？

 $("#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");
    });

Answer 1

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

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

document您可以通过这种方式委托：

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

演示小提琴

Answer 2

放这个：

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

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

JSFiddle