.click function not working after ajax event
Hi all,
I have a page where the user can click a link and it changes the status of a record via an ajax request and then moves the element (in this case a list item) to its alternate list. The problem I have is after the event is fired it does not run again. The reason I need it to run again is if the user wishes to change their mind they can click the link again and it will change the status back and reposition the element back in the original list
Has anyone run into this problem before?
-
$('.statusOffline').click(function(){
var inactive = $("#inactive li:last").parent().html();
var id=$(this).parent('li').attr("id");
var parent=$(this).parent('li').html();
$(this).parent('li').animate({ height: "40px" }, "fast").animate({ height:"0px"}, "fast", function(){
$(this).remove();
$("#inactive").append("<li id='"+id+"' class='managementLists'>"+parent+"</li>");
});
$.ajax({
type: "POST",
url: "/sql/change_status.php",
data: "status=0&id="+id,
cache: false,
success: function(html){
}
});
return false;
});