Hi everybody,

I've trying to get the feature of Google+ notification with ajax
Here's my jQuery codes
Code:
$(document).ready(function(){

	// noticfication
	$(".noticfication").click(function(e) {
		updateNotification();
		e.preventDefault();
		$("fieldset#noticfication").toggle();
		$(".noticfication").toggleClass("menu-open");
	});
	$("fieldset#noticfication").mouseup(function() {
	return false
	});
	$(document).mouseup(function(e) {
		if($(e.target).parent("a.noticfication").length==0) {
			$(".noticfication").removeClass("menu-open");
			$("fieldset#noticfication").hide();
		}
	});
	
	// if the notification is updated
	$(".noticfication_1").click(function(e) {
		e.preventDefault();
		$("fieldset#noticfication").toggle();
		$(".noticfication_1").toggleClass("menu-open");
	});
	$("fieldset#noticfication").mouseup(function() {
	return false
	});
	$(document).mouseup(function(e) {
		if($(e.target).parent("a.noticfication_1").length==0) {
			$(".noticfication_1").removeClass("menu-open");
			$("fieldset#noticfication").hide();
		}
	});
}
function updateNotification() {
	$.ajax({
		type: "POST",
		url: "update_notification.php",
		data: $('#notification').serialize(),
		dataType: "json",
		success: function(msg){
			if(parseInt(msg.status)==1) {
				$(".notification").replaceWith("<a href='#' class='notification_1'>0</a>");
				$(".notification_1").toggleClass("menu-open");
			}
		}
	});
}
And here's the PHP function
Code:
function msg($status,$txt) {
	return '{"status":'.$status.',"txt":"'.$txt.'"}';
}
The symtomps: you see, the above method is shallow; the user can only click on the notification icon one time to see messages whenever they get it. Without page refreshed, they will not be able to expand the message holder pane with another click.

How could I solve this and thanks in advance