.on не работает на динамическом HTML

Question

Я создаю вещь перетаскивания. Когда происходит сброс, я создаю новый HTML- код времени выполнения и хочу связать его с событием, поэтому я использовал следующее .on

 .on ( "event", "selector", function() {

но это не работает. Вот фрагмент кода:

$( "#wrap .dragImages" ).on( "click", "button.edit-new-modal", function() {
    var photoId = $(this).attr('data-username');        
    alert(photoId);
});

.on работает до перетаскивания. Но после слов ничего не происходит при нажатии "button.edit-new-modal"!! В чем дело? Любое решение?

Answer 1

Пытаться:

$(document.body).on( "click", "button.edit-new-modal", function() {
  var photoId = $(this).attr('data-username');        
  alert(photoId);
});

Answer 2

Это

$( "#wrap .dragImages" ).on( "click", "button.edit-new-modal", function() {

должно быть:

$(document).on( "click", "button.edit-new-modal", function() {

Answer 3

Это динамически генерируемый HTML, поэтому он не будет работать. Попробуйте использовать приведенный ниже фрагмент кода

$(document).on( "click", "button.edit-new-modal", function() {

    var photoId = $(this).attr('data-username');        
    alert(photoId);
});

Answer 4

Когда вы подключаете обработчики событий, они привязываются только к существующим элементам HTML.

Как и когда вы вставляете динамический HTML, вы должны снова подключить эти обработчики.

В вашем случае вы можете обернуть настройку обработчика событий в такую ​​функцию:

    function wireUpHandlers() {
        $( "#wrap .dragImages" ).on( "click", "button.edit-new-modal", function() {
            var photoId = $(this).attr('data-username');        
            alert(photoId);
        });
    }

Вызовите этот метод в вашем document.ready и затем вызовите этот метод снова, после того как вы добавили свой динамический HTML на страницу