日期:2014-05-16  浏览次数:20452 次

回复文本处理那段代码为什么实现不了?
本帖最后由 ty4z2008 于 2013-03-31 10:27:35 编辑
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>微博</title>
<style type="text/css">
#box{
border-style:solid;
border-bottom-width:10px;
}
</style>
<script type="text/javascript" src="jquery-1.8.3.js"></script>
<script type="text/javascript">
$(document).ready(function(e) {
     $("body").append("<div id=page>"+"<textarea id=text style='height:300px;width:400px;'>"+"</textarea><input id=post type='button'  value='发表'/>"+"</div>")
$("#post").click(function(e){
var tmp = $("#text").val();
$("body").append("<div id=box >"+tmp+"<input id=a type='button' value='回复' />"+"<input type='button' id=b value='删除'/>"+"</div>");
}); 
});
/***********************回复文本处理***********************/
$(document).ready(function(e) {
    $("#a").click(function(){
alert("ok");
});
});
</script>
</head>
<body>
</body>
</html>


上面是源代码,但是
$(document).ready(function(e) {
    $("#a").click(function(){
alert("ok");
});
});

无法实现,请问是什么原因?
jquery

------解决方案--------------------
$(document).ready 时#a还没有创建,无法绑定
而且这样写一堆代码挤在ready这里,可读性很差。


$(document).ready(function(e) {
     $("body").append("<div id=page>"+"<textarea id=text style='height:300px;width:400px;'>"+"</textarea><input id=post type='button'  value='发表'/>"+"</div>")
$("#post").click(function(e){
var tmp = $("#text").val();
$("body").append("<div id=box >"+tmp+"<input id=a type='button' value='回复' />"+"<input type='button' id=b value='删除'/>"+"</div>");
/***********************回复文本处理***********************/
 $("#a").click(function(){
alert("ok");
 });
}); 
});


------解决方案--------------------
文档就绪。这个要从事件模型说起了。
web的远古时代,事件绑定是写在html代码里的,如<input id=a type='button' value='回复' onclick="xxxxx()"/>,这种写法可读性比较差,特别是动态生成新的dom对象时。后来就有了事件模型2.0版,就是document.getElementById("a").onclick= function(){},但这种绑定有一个问题,一般js加载在前面,html文档加载在后面,所以才有$(document).ready的做法,这个也是一个事件,文档加载就绪,这个一般是比onload快,不过只有框架才有这种实现,作用就是当html文档加载完成后,你可以开始绑定事件了。