Click event not working with the checkbox tag

Question

i have this code below:

        html.push('<tr class="reservas">');
        html.push('<td> <input type="checkbox" class="checkbox" data-name="' + bla.name + '" data-email="' + bla.email /> </td>'); // atribui os dados a atributos para serem acessados posteriormente por jquery.
        html.push('<td>' + bla.name + '</td>');
        html.push('<td>' + bla.email + '</td>');
        html.push('</tr>');
        $('tbody').append(html.join(""));


$(function(){
    $('.save').on('click', function(){
   });
});

The click event does not work, if i change for the body tag will work, but i need with the checkbox class.

Every help is very appreciated.

Answer 1

Use EventDelegation:

$(function(){
    $(document).on('click', '.checkbox', function(){
        alert('salvo');
   });
});

From Docs:

Event delegation allows us to attach a single event listener, to a parent element, that will fire for all descendants matching a selector, whether those descendants exist now or are added in the future.