Question

So I’m going to explain this with an example.

I have a “like” button (class: .like) for my feed or stream. When the user clicks it ( using $(“.like”) ), it ajaxes it’s way to refreshless insert the like into the database (using jQuery).

When it’s inserted, I change the text to “Unlike” and the class to “.unlike”.

However, when a user reclicks it, it just goes through the same function again, instead of going to the $(“.unline”).click function. Do I have to “update” the script or something?

For example:

    $(".like").click(function(){
       alert("Like!");
       $(this).attr("class", "unlike");
    });
    $(".unlike").click(function(){
       alert("Unlike!");
       $(this).attr("class", "like");
    });

The problem is that it won’t to the unlike function, it will just repeat the like function even though the attribute is changed.

Answer 1

I think you will have to use live() or on() to make this work:

 $(".like").live("click", function() {
    $(this).removeClass("like").addClass("unlike");
 });
 $(".unlike").live("click", function() {
    $(this).removeClass("unlike").addClass("like");
 });