javascript - How to do .click() on added class in JQuery? -

i trying create simple edit function on button. when user clicks the edit button (containing following classes btn btn-primary btn-edit change-btn), text change "save", readonly attributes removed on input elements, , have class btn-success save-btn @ same time removing edit-btn btn-primary class. when user clicks button again, update , save data. although removes , changes classes, save-btn function wont work simple "hello" alert. here code:

$(document).ready( function() {      $('.save-btn').click(function () {           alert('hello');     });      $('.edit-btn').click(function () {           $('.change-btn').removeclass('btn-primary edit-btn').addclass('btn-success save-btn').text('save');           $('#firstname, #lastname').removeattr('readonly');     }); }); 

is there wrong of execution of javascript/jquery here?

it doesn't work because when adding save-btn click handler class isn't on button yet. try use delegates.

$(document).ready( function() {      $(document).on('click', '.save-btn', function () {           alert('hello im clicked');     });      $(document).on('click', '.edit-btn', function () {           $('.change-btn').removeclass('btn-primary edit-btn').addclass('btn-success save-btn').text('save');           $('#firstname, #lastname').removeattr('readonly');     }); }); 

you can use parent of button instead of document.