Jquery - Change Button Function -

this question has answer here:

• event binding on dynamically created elements? 18 answers

i new jquery , i'm trying write code changes clicked button both in text , function. here code:

$('.button1').click(     function() {         $(this).val('button2');         $(this).removeclass('button1').addclass('button2');     } );  $('.button2').click(     function() {         alert('button 2 clicked');     } ); 

the problem is, second event not fire , call alert.

thanks in advance

event handlers bound elements, , changing class of element doesn't change binding. in case, need use event delegation.

from jquery 1.7 onward, use .on() that:

$(document).on('click', '.button1',      function() {         $(this).val('button2');         $(this).removeclass('button1').addclass('button2');     } );  $(document).on('click', '.button2',      function() {         alert('button 2 clicked');     } ); 

if have common ancestor, (say <div id="container">) used instead of document: $('#container').on('click', '.button2', .... work long every .button1 , .button2 want click event under div.