jq动态添加html标签属性,用jQuery动态地 给 动态生成的html元素 增改属性

in1

in2

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");

});

});

以上代码在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");     });});   */