用jQuery动态地 给 动态生成的html元素 增改属性
<!-- 测试动态生成的div内的div的事件属性的增改 -->
<html>
<body bgcolor="white">
<!-- 引入jQuery库 -->
<script src="common/jquery-1.2.6.min.js" type="text/javascript"></script>
<div id="out1" style="width:300px;height:200px;border:1px solid black;">
<!-- 静态DIV -->
<div id="in1" style="width:300px;height:100px;">in1</div>
<div id="in2" style="width:300px;height:100px;">in2</div>
</div>
<div id="out2" style="width:300px;height:200px;border:1px solid black;">
<!-- 动态产生DIV -->
</div>
<input type="button" id="button1" value="点击我生成div!"><br />
<input type="button" id="button2" value="点击我更改div内的div的onmouseover属性!">
<script language="javascript">
var count = 1;
//动态生成div
$("#button1").click(function(){
var d = document.createElement("div");
d.innerHTML = "生成的div:" + count;
d.style.height = "25px";
count++;
$("#out2").append(d);
});
//增加内层div的onmuseover、onmouseout事件处理函数
//延迟计时器
var timer;
$("#button2").click(function(evt){
$("div div").unbind("mouseover mouseout");
$("div div").mouseover(function(evt){
evt = evt || window.event; //取事件源 火狐||IE
//延迟，0.5秒后才执行myShow方法。
timer = setTimeout(myShow,500);
function myShow()
{
var src = evt.target || evt.srcElement; //火狐||IE
$(src).css("background-color","#cccccc");
}
});
$("div div").mouseout(function(evt)
{
//取消定时器
clearTimeout(timer);
evt = evt || window.event;
var src = evt.target || evt.srcElement;
$(src).css("background-color","#ffffff");
});
});</script>
</body>
</html>
以上代码在IE7、火狐2中都可以正常运行。可以看到无论静态的、还是动态生成的div增加属性后的效果都是一样的。（和我昨晚预想的不同）
"生成div“按钮和"更改div内的div的onmouseover属性!"按钮的点击次序会影响生成的效果。
点击"更改div内的div的onmouseover属性!"后，点击再"生成div“按钮生成的div在发生onmouseover、onmouseout 事件时是没有效果的。 需要再点击一次”更改div内的div的onmouseover属性!“按钮才行。
而且也证实了我的推测：jQuery没有封装事件源。jQuery中的事件源获取还是用老套路。
几天大概翻了一下《锋利的 jQuery》，才意识到还可以有更简洁的写法：
/*更简洁的写法 09-11-02 by zxw
//延迟计时器
var timer;
$("#button2").click(function(evt){
$("div div").unbind("mouseover mouseout");
$("div div").mouseover(function(evt){
var $src = $(this); //取数据源
timer = setTimeout(myShow,500);
function myShow()
{
$src.css("background-color","#cccccc");
}
});
$("div div").mouseout(function(evt)
{
//取消定时器
clearTimeout(timer);
$(this).css("background-color","#ffffff");
});
});
*/