click后函数没有被调用
以下是我写的代码，问题是：点击按钮后，没有执行对应函数，希望有人可以帮忙看一下，拜托了
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script src="http://libs.baidu.com/jquery/1.9.0/jquery.js" type="text/javascript"></script>
<title>挑战题</title>
<style>
#container{
margin:0;
border:1px solid red;
width:300px;
height:auto;
}
input{
margin-top:10px;
margin-left:30px;
}
span{
margin-left:20px;
color:red;
}
#saveData{
margin-top:5px;
margin-left:90px;
background-color:blue;
}
#showData{
margin-top:5px;
margin-left:10px;
background-color:blue;
}
</style>
</head>
<body>
<div id="container">
<form action="#" method="get">
<span>name:</span><input id="nameTxt" type="text" /><br/>
<span>sex :</span><input id="sexTxt" type="text" /><br/>
<span>age :</span><input id="ageTxt" type="text" /><br/>
<span> ID:</span><input id="IDTxt" type="text" /><br/>
<input class="btn" id="saveData" type="button" value="保存数据">
<input class="btn" id="showData" type="button" value="显示数据"><br/>
</form>
<ul></ul>
</div>
<script>
var $nameTxt=$("#nameTxt");
var $sexTxt=$("#sexTxt");
var $ageTxt=$("#ageTxt");
var $IDTxt=$("#IDTxt");
var json=[];
$("#saveData").on('click',function(){
json.push({
name:$nameTxt.val(),
sex:$sexTxt.val(),
age:$ageTxt.val(),
ID:$IDTxt.val()
});
alert("保存成功！")；
});
$("#showData").on('click',function(){
$.each(json,function(i){
$('ul').append('<li>'+json[i].name+'</li>'+'<li>'+json[i].sex+'</li>'+'<li>'+json[i].age+'</li>'+'<li>'+json[i].ID+'</li>');
});
});
</script>
</body>
</html>
