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

Question

I am trying to create a simple edit function on a button. When the user clicks the the Edit Button (containing the following classes btn btn-primary btn-edit change-btn), the text will change to "Save", the readonly attributes will be removed on the input elements, and will have a class btn-success save-btn at the same time removing the edit-btn btn-primary class. So that when the user clicks the button again, it will update and save the data. Although it removes and successfully changes the classes, the save-btn function wont work even with a simple "hello" alert. Here is my 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 something wrong of my execution of the javascript/jquery here?

What's the issue are you facing?can you fiddle your code please? — Mox Shah

Barış Uşaklı Barış Uşaklı · Accepted Answer · 2015-03-21T03:44:14

It doesn't work because when you are adding the save-btn click handler that class isn't on the button yet. Try to 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 the parent of the button instead of the document.

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

1 Answers