CODEWITHSUNDEEP
javascriptjquery
Sasha
Sasha

Reputation: 8705

Problem with jquery and ajax

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?

Upvotes: 1

Views: 47

Answers (3)

Richard Dalton
Richard Dalton

Reputation: 35793

Looks like you're replacing the links that you click which loses the event bindings.

Change the .click() to use .live('click'..

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

Upvotes: 0

Jeff
Jeff

Reputation: 6663

Change:

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

To:

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

Upvotes: 3

Clive
Clive

Reputation: 36957

You seem to be replacing the container and the elements inside it, so the elements that had the click events bound to them will have been removed.

You can fix this by changing your event handlers to use live:

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

and

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

Upvotes: 1

Related Questions