Кнопка обработки событий

Question

У меня есть этот DIV, что я забирающий из базы данных

'<div class="column">'+ 
     '<div>'+ '<img src='+aparat.imagine+' width="150" height="140" />' +'</div>'+ 
     '<div>'+ aparat.nume + '</div>' +             //functia care le aranjeaza 
     '<div id="pret">'+ aparat.pret +'&nbsplei' + '</div>'+ 
     '<div>'+'<button data-value="'+aparat.id+'" class = "comanda">'+'Comanda!'+'</button>'+'</div>' 
     + '</div>'; 

и обработчик событий:

$(document).ready(function(){ 
$('.comanda').click(function() { 
     alert('button clicked'); 
     }); 
}); 

Проблема заключается в том, когда я нажимаю кнопку ничего не происходит, что ж Я делаю неправильно?

Answer 1

Если вы загрузили данные базы данных после того, как страница полностью загружена, вам лучше использовать on вместо click, как показано на рисунке, потому что есть шанс, что вы подключаете обработчик событий к элементу, который еще не существовать.

$('body').on("click", ".comanda", function() { 
    alert('button clicked'); 
});