【推荐】jquery clone 与 clone(true) 的区别

  <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"   "http://www.w3.org/TR/html4/loose.dtd"> 
  <html> 
  <head> 
    <script src="jquery-1.4.3.js" type="text/javascript"></script> 
     
    <script> 
    $(document).ready(function(){ 
       
      $("button").click(function(){ 
        $(this).clone(true).insertAfter(this); 
      }); 
   
    }); 
    </script> 
     
  </head> 
  <body> 
    <button>Clone Me!</button> 
  </body> 
  </html> 
 

(1)这个例子中 clone , clone(true)的区别在于,clone(ture)除了克隆集合,还会克隆click句柄

(2)现象就是:clone的 Clone Me! 无法继续点击克隆。但是clone(true)出来的 Clone Me! 可以继续克隆,和原本按钮没有区别。

如上是ITeye中的经验,今天确实深刻感悟了一番。差点儿又写出了一大堆冗余代码。 过程如下:

            <li class="more_box"></li>
            <li class="tab_more">
                 <div id="more_list">
                      <a href="#"><b>绩效考核</b></a>
                      <a href="#"><b>管理考核</b></a>
                      <a href="#"><b>岗位分析</b></a>
                      <a href="#"><b>系统维护</b></a>
                      <a href="#"><b>个人设置</b></a>
                 </div>
           
            </li>


需要实现的效果是id="more_list"下的a单击后,将a克隆并添加到<li class="more_box"></li>之中。

  $("#more_list>a").click(function(){
      $(".more_box").html($(this).clone(true)).show().click();
  })



结果确实实现了克隆,但li元素本身的click事件怎么也运行不了了。(以上述原理,当clone(true)时,将a的click事件也复制过去了,所以li单击时触发的是a的click的事件,原本的事件被覆盖)
于是乎找了一下午原因终于发现了。

去掉clone(true),中的true即可(只克隆元素,不克隆事件)。
   $("#more_list>a").click(function(){
      $(".more_box").html($(this).clone()).show().click();
  })

一切搞定~~~



 


阅读本文后,您的心情是:
 
恶心
愤怒
强赞
感动
路过
无聊
雷囧
关注
知识共享许可协议
评论(0) 浏览(28373) 引用(0)
引用地址:http://blog.baiwand.com/tb.php?sc=f637f2&id=27
Tags:
« jQuery的过滤选择器 【解决】IE6、7下“缺少标识符,字符串或数字”错误 »

Blogger

  • blogger
  • 天之骄子
  • 职位:研发工程师
    铭言:
    阳光与欢乐同在,
    与我同在
    主页:
    blog.baiwand.com

分类目录

日志归档

主题标签

数据统计

  • 日志:151篇
  • 评论:45条
  • 碎语:264条
  • 引用:0条

链接表

随机日志 »

最新日志 »

最新评论 »

标签云 »

订阅Rss
sitemap