Как реагировать на динамически сгенерированную кнопку?

Question

добавить кнопку со следующим кодом:

$('.dishes').prepend($('<div class="row" data-dishid="'+dishid+'"><div class="col-md-8">'+dishname+'<button type="button" class="close" aria-label="Close"><span aria-hidden="true">&times;</span></button></div></div>')); 

Но следующий код не поймать кнопку мыши (если она работает с тем же кодом, если она является частью статического HTML):

$("button.close").click(function() { 
     var row = $(this).closest('.row'); 
     var dishid = row.attr('data-dishid');  
}); 

Как это исправить?

См. the sample code.

Answer 1

Я видел код.Вы должны вызвать функцию щелчка динамического элемента сразу после добавления элемента. Попробуйте код ниже.

$("#add").on('click', function() { 
    $('.dishes').prepend($('<div class="row" data-dishid="'+ "test" +'"><div class="col-md-8">'+ " test " +'<button type="button" class="close" aria-label="Close"><span aria-hidden="true">&times;</span></button></div></div>')); 
    $("button.close").on('click', function() { 
     var row = $(this).closest('.row'); 
     var dishid = row.attr('data-dishid');  
     console.log(dishid); 
    }); 
}); 

Answer 2

Для динамически созданных элементов, вы должны использовать .on('click', selector, callback)

как

$(document).on("click", "button.close", function() { 
    var row = $(this).closest('.row'); 
    var dishid = row.attr('data-dishid');  
}); 

Answer 3

$("button.close").on("click", function(){ 
    console.log('ok'); 
}); 

Вы должны использовать на() функции для динамически создаваемых HTML элементов

Answer 4

попробовать:

$("button.close").on("click", function() { 
    console.log('ok'); 
}); 

Вам нужен обработчик события .on для динамически созданных элементов DOM.

UPDATE:

вам не нужно ставить JQuery $ до содержания препенда. Вот ваш скрипт с вашим кодом.

https://jsfiddle.net/3k7Laohn/

Answer 5

Вы должны event delegation для динамически генерируемого элемента. Попробуйте следующее.

$(document).on('click', "button.close", function() { 
    var row = $(this).closest('.row'); 
    var dishid = row.attr('data-dishid'); 
    console.log(dishid); 
}); 

WORKING DEMO

Answer 6

Вот ваш updated code.

Я изменил:

$("button.close").click(function() { 
     var row = $(this).closest('.row'); 
     var dishid = row.attr('data-dishid');  
}); 

To:

$(".dishes").on('click', 'button.close', function() { 
     var row = $(this).closest('.row'); 
     var dishid = row.attr('data-dishid');  
     console.log(dishid); 
}); 

На этот вопрос отвечает по всему интернету, и вот фрагмент с сайта JQuery в:

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

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

Source

Answer 7

При проверке кода событие click должно работать нормально. Возможно, проблема зависит от времени. Мое предположение, если у вас есть код:

$("button.close").click(function() { 
    var row = $(this).closest('.row'); 
    var dishid = row.attr('data-dishid'); 
}); 

Вы еще не добавили объект на DOM. Каждый раз, когда вы вызываете метод ниже, вы должны немедленно привязать событие click. Лучше всего иметь коды, чтобы проверить, будет ли это работать.

$('.dishes').prepend($('<div class="row" data-dishid="'+dishid+'"><div class="col-md-8">'+dishname+'<button type="button" class="close" aria-label="Close"><span aria-hidden="true">&times;</span></button></div></div>')); 
$("button.close").click(function() { 
    var row = $(this).closest('.row'); 
    var dishid = row.attr('data-dishid'); 
});