为什么第一次点按钮不保存，第二次点才开始保存？
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>挑战题</title>
<style type="text/css">
.form-div+.form-div{
margin-top:10px;
}
ul{
list-style:none;
padding-left:0px;
}
ul>li+li{
margin-top:5px;
}
</style>
<script src="http://libs.baidu.com/jquery/1.9.0/jquery.js" type="text/javascript"></script>
</head>
<body>
<form action="#",method="get">
<div class="form-div">
<label for="name">姓名：</label><input type="text" name="name" id="name" />
<button id="btn1" value="save">保存</button>
</div>
<button id="btn2" value="show">显示</button>
</div>
</form>
<ul></ul>
<script type="text/javascript">
var json = [];
$('#btn1').on('click',function(){
json.push({
name : $("#name").val()
});
$("#name").val('');
});
$("#btn2").bind("click",function(){
$("li").html("");
$.each(json,function(i,obj){
$("ul").append("<li>姓名："+obj.name+"</li>");
});
})
</script>
</body>
</html>
