Submit form with jQuery on changed style

OK, the title may be quite confusing. I'll try 开发者_如何学JAVAto 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?

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");
});

You have to use the live function I think. When you first attach the click handler it doesn't match any elements:

http://api.jquery.com/live/

Try this:

$(".edit, .save").click(function() {
    if($(this).hasClass("edit") {
        $(this).removeClass("edit").addClass("save");
    } else {
        $(this).removeClass("save").addClass("edit");
    }

});

Assign an id to the element rather than applying the "this" statement. and then change the class .

I have done something exactly the same and it works.