event handler attached using 'on' on document is executing content like event bubbling from old response to new one.

event handler attached using 'on' on document is executing content like event bubbling from old response to new one.


<!DOCTYPE html>
<html>
<head>
<title>JS Test</title>
<script type="text/javascript" src="js/plugins/jquery-1.8.3.min.js"></script>
</head>
<body>
<h1>Js Test</h1>
<button id="getContent">Get Dynamic Content via Ajax call !</button>
<div id="content">
</div>
<div id="status"></div>
<script>
$(function(){
$("#getContent").click(function(event){
$.ajax({
url : "./file/hello",
success : function(result, status, xhr){
$("#content").html(result);
$("#status").html("Success!");
},
error : function(xhr, status, error){
$("#content").html("Error occured while retrieving content");
$("#status").html("Failed!");
},
complete : function(xhr, status){
//
}
});
});
});
</script>
</body>
</html>

from this file ,on click of button i am getting content which contains Js via ajax call.
Response:

<html>
<head></head>
<body>
<script>
$(function(){
                //$("#test").click(function(event){
$(document).on('click','#test',function(event){
debugger;
alert("Hi");
});
});
</script>
<button id="test">Test</button>
</body>
</html>

Now whwn i click on test button ,it displays "hi".And whwn i click this button after hitting "Get Content .." button,it displays hi 2 times .And ialert count = count of times response getting loaded via ajax.
Same thing works fine if i use $("#test").click(..) handler.

What is the reason for this?