Jquery события щелчка больше не связана для вновь созданных тегов

Question

Пожалуйста, смотрите следующие

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

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

Demo fiddle

Answer 2

Просто поместите это:

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

после .appendTo поэтому событие будет установлены для нового приложенного ввода :)

JSFiddle