Question

I have two functions:

$(function() {
    $(".deactivated").click(function() {           
          var Container = $(this).parent();             
       var id = $(this).attr("id");             
        var string = 'id='+ id ;    
        $.ajax({   
            url: "<?php echo site_url('social/activate') ?>",
            type: "POST",
            data: string,
            cache: false,
                 success: function(){
                     Container.fadeOut(1000, function(){
                     $(this).load("<?php echo site_url('social/social_icon') ?>", {id: id}, function(){
                         $(this).hide().fadeIn(700);
                         $(this).click();
                     })
                 });
            }   
        });
        return false;
    });
});

 $(function() {
    $(".activated").click(function() {           
          var Container = $(this).parent();             
       var id = $(this).attr("id");             
        var string = 'id='+ id ;    
        $.ajax({   
            url: "<?php echo site_url('social/deactivate') ?>",
            type: "POST",
            data: string,
            cache: false,
                 success: function(){
                     Container.fadeOut(1000, function(){
                     $(this).load("<?php echo site_url('social/social_icon') ?>", {id: id}, function(){
                         $(this).hide().fadeIn(700);
                     })
                 });
            }   
        });
        return false;
    });
});

One is to activate link and other is to deactivate it. Functions are working fine, but when link is activated or deactivated, it can’t be clicked again to change it (page needs to be refreshed in order for functions to work again). What I need to do to make it work?

Answer 1

Change:

$(".activated").click(function() {
$(".deactivated").click(function() { 

To:

$(".activated").live('click',function() {  
$(".deactivated").live('click',function() {