Bind события динамически созданное ДИВОЙ

Question

Я создаю DIV с пролетом на месте с помощью JQuery, как так

$("[data-modal]").click(function(event) { 
    event.preventDefault(); 

    var container = $("<div></div>").addClass("modal m-form").appendTo(document.body); 
    var close = $("<span></span>").addClass("modal-close").appendTo(container); 
} 

до сих пор так хорошо ...

тогда я связывание событие к селектору модальной близко, как так

$(".modal-close").click(function(event) { 
    alert("close the dialog"); 
}); 

это один не работает, поэтому я попытался это одно, без успеха:

$(".modal-close").on("click", function(event) {   
    alert('close the dialog'); 
}); 

Что я делаю неправильно?

Answer 1

Вы должны привязать его к следующему статическому родителя. Значит, если у вас есть родительский элемент, который никогда не изменяется, привяжите его к этому (в вашем случае может быть обертка для всего модального). Если у вас нет статической обертки, вы также можете привязать ее к документу:

$(document).on('click', '.modal-close', function(event) { 
    alert("close the dialog"); 
}); 

Answer 2

Чтобы связать событие с динамически созданным элементом, вы можете использовать .on(). Вы использовали .on() неправильно, пожалуйста, проверьте ниже код -

$(document).on("click",".modal-close", function(event) { 
    alert("close the dialog"); 
}); 

More Information for .on()