Button event handling

Question

I have this div that I am fetching from a database

'<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>';

and the event handler:

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

The problem is, when I click the button nothing happens, what am I doing wrong?

Are you fetching that div before or after the page is loaded? — j08691, Nov 09 '16 at 22:00
after the page is loaded, the div is also in a $(document).ready(function(){}) — alin dradici, Nov 09 '16 at 22:02

score 2 · Accepted Answer · answered Nov 09 '16 at 22:02

2

If your database data is loaded after the page has fully loaded you'd better use on instead of click as shown, because there's a chance you are attaching an event handler to an element that doesn't yet exist.

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

answered Nov 09 '16 at 22:02

Angel Politis

10,955
14
48
66

I'm glad I could help you @alindradici. – Angel Politis Nov 09 '16 at 22:04

Button event handling

1 Answers1