Problem with jquery and ajax

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?

Are you changing the class of the links?! deactivated=> activated and activated => deactivated — Bruno Costa
– Bruno Costa, Commented Sep 28, 2011 at 8:47

Jeff · Accepted Answer · 2011-09-28 08:46:49Z

3

Change:

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

To:

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

answered Sep 28, 2011 at 8:46

Jeff

6,6733 gold badges27 silver badges36 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Clive · Accepted Answer · 2011-09-28 08:46:26Z

1

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() {

answered Sep 28, 2011 at 8:46

Clive

36.9k8 gold badges89 silver badges113 bronze badges

Comments

Richard Dalton · Accepted Answer · 2011-09-28 08:47:54Z

0

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() {

answered Sep 28, 2011 at 8:47

Richard Dalton

35.8k6 gold badges75 silver badges92 bronze badges

Collectives™ on Stack Overflow

Problem with jquery and ajax

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related