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);
})
});
}
开发者_StackOverflow社区 });
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?
Change:
$(".activated").click(function() {
$(".deactivated").click(function() {
To:
$(".activated").live('click',function() {
$(".deactivated").live('click',function() {
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() {
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() {
精彩评论