html5 - Html loaded via ajax is not working with jQuery events -

i've code in file called checkout.tpl, have javascript code , i'll comment below:

$.ajax({     url: 'index.php?route=checkout/payment_address',     datatype: 'html',     success: function(html) {         $("#checkout").hide();         $('#payment-address .checkout-content').html(html);     },     error: function(xhr, ajaxoptions, thrownerror) {         alert(thrownerror + "\r\n" + xhr.statustext + "\r\n" + xhr.responsetext);     } }); 

as can see here load html content using ajax. html content i'm loading. notice input id=button-payment-address. in checkout.tpl have jquery code:

$('#button-payment-address').on('click',function() {     alert("click");     // here goes code    }); 

when click input id=button-payment-address alert "click" should appear or not? not showed , code never executed, no errors trigger don't know what's wrong. test other code , same result:

$('#button-payment-address').click(function() {     alert("click");     // here goes code    });  // seems not working latest jquery , generates error $('#button-payment-address').live('click', function() {     alert("click");     // here goes code    }); 

any help?

try this

$('#payment-address').on('click','#button-payment-address',function() {     alert("click");     // here goes code    });