Question

OK, the title may be quite confusing. I’ll try to explain. I have an element, that when clicked is calling a function with jQuery and the style of the element is changed from one to another:

    $(".edit").click(function() {
        $(this).removeClass("edit").addClass("save");
    });

    $(".save").click(function() {
        // do form post
        $(this).removeClass("save").addClass("edit");
    });

 <span class="edit"></span>

When I click it the style does change. I checked with FireFinder for Firebug and indeed I see “save” class but when it is clicked, it does not appear that I trigger second function, but rather still the first one. Why? And how do I fix that?

Answer 1

You have to add a LIVE event – http://api.jquery.com/live/

$(".edit").live('click', function() {
    $(this).removeClass("edit").addClass("save");
});

$(".save").live('click', function() {
    // do form post
    $(this).removeClass("save").addClass("edit");
});