CODEWITHSUNDEEP
jquery
santa
santa

Reputation: 12512

Submit form with jQuery on changed style

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?

Upvotes: 1

Views: 87

Answers (4)

abbas
abbas

Reputation: 89

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.

Upvotes: 0

karim79
karim79

Reputation: 342635

Try this:

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

});

Upvotes: 0

Mārtiņš Briedis
Mārtiņš Briedis

Reputation: 17752

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

Upvotes: 6

Dave L.
Dave L.

Reputation: 9781

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/

Upvotes: 1

Related Questions