用jQuery动态地给动态生成的html元素增改属性

最新推荐文章于 2022-12-12 11:37:34 发布

teresa502

最新推荐文章于 2022-12-12 11:37:34 发布

阅读量6.1k

点赞数

分类专栏： Javascript 文章标签： jquery html div function timer button

本文链接：https://blog.csdn.net/teresa502/article/details/5658582

版权

Javascript 专栏收录该内容

184 篇文章 0 订阅

订阅专栏

   //动态生成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");
     });
});
   */