Question

I have a problem with one jQuery script. I use this code:

<span class="follow" data-id="<?=$m['id']; ?>" ></span>

–

        $('.follow').click(function(){

        $.ajax({
            type: "POST",
            url:"../ajax/settings/follow.php", 
            async: false,
            dataType:'html',
            data: {'id':$(this).attr('data-id')},
            success:function(rs){
               $(this).removeClass("follow"); 
                $(this).addClass("unfollow"); 

            },

            error:function (xhr, ajaxOptions, thrownError){
                alert("ERROR !!!");
                alert(xhr.status);
                alert(ajaxOptions);
                alert(thrownError);

            }  
        });   

    });

After click the span with style image TICK changed to CROSS, and changed attr class to unfollow. After click unfollow class must change to follow, but not working.

        $('.unfollow').click(function(){

        $.ajax({
            type: "POST",
            url:"../ajax/settings/follow.php", 
            async: false,
            dataType:'html',
            data: {'id':$(this).attr('data-id')},
            success:function(rs){
               $(this).removeClass("unfollow"); 
                $(this).addClass("follow"); 

            },

            error:function (xhr, ajaxOptions, thrownError){
                alert("ERROR !!!");
                alert(xhr.status);
                alert(ajaxOptions);
                alert(thrownError);

            }  
        });   

    });

What’s wrong?

I apologize for my English!

Answer 1

 $('.unfollow').click(function(){

   // you need keep a reference of '.unfollow' here
   // otherwise you can't get it within success()
   // because success() is another scope

   var reference = this; 

   $ajax({
      ...
      success: function() {  
        $(reference ).removeClass("unfollow"); 
        $(reference ).addClass("follow"); 
        ....
      }
   });
  });

and do same for your follow:

 $('.follow').click(function(){

   // you need keep a reference of '.unfollow' here
   // otherwise you can't get it within success()
   // because success() is another scope

   var reference = this; 

   $ajax({
      ...
      success: function() {  
        $(reference ).removeClass("follow"); 
        $(reference ).addClass("unfollow"); 
        ....
      }
   });
  });

Here one important thing to note that, changing of class not done immediately with click, because you’re changing class within ajax success function, which will take some time to change the class. If you want to change the class instantly on click then take away those change statement outside of ajax success function.

Another important note

When you change the class of span then it becomes dynamic element to DOM. suppose you have span with class follow and on click event to span.follow you change the class to unfollow. As the .unfollow was not belong to DOM at page load so it becomes an dynamic element and on ordinary bind will not work here. Same for when you change class from unfollow to follow.

So in both case you need delegate event handler (aka live) event handler like following:

$(document).ready(function() {
    $('#container').on('click', 'span.follow', function() {
        var reference = this;
        alert('follow');
        $(reference).removeClass("follow");
        $(reference).addClass("unfollow");
    }).on('click', 'span.unfollow', function() {
        var reference = this;
        alert('unfollow');
        $(reference).removeClass("unfollow");
        $(reference).addClass("follow");
    });
});

DEMO