Jquery click事件不再绑定新创建的标记

时间:2013-10-09 11:26:32

标签: javascript jquery

请参阅以下

fiddle

我正在使用.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");
    });

2 个答案:

答案 0 :(得分:3)

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

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

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

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

Demo fiddle

答案 1 :(得分:0)

就这样说:

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

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

JSFiddle