jquery中clone与clone(true) 的区别

最新推荐文章于 2021-10-31 17:52:43 发布

wenxin_liu

最新推荐文章于 2021-10-31 17:52:43 发布

阅读量359

点赞数

本文链接：https://blog.csdn.net/wenxin_liu/article/details/106322964

版权

简介作用：
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="<strong>jquery</strong>-1.4.3.js" type="text/javascript"></script> 
     
   <script> 
   $(document).ready(function(){ 
       
     $("button").click(function(){ 
       $(this).<strong>clone</strong>(true).insertAfter(this); 
     }); 
   
   }); 
   </script> 
     
 </head> 
 <body> 
   <button><strong>Clone</strong> Me!</button> 
 </body> 
 </html>

1、这个例子中 clone , clone(true)的区别在于，clone(ture)除了克隆集合，还会克隆click句柄
2、现象就是：clone的 Clone Me! 无法继续点击克隆。但是clone(true)出来的 Clone Me! 可以继续克隆，和原本按钮没有区别。

再写一个事件

<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).<strong>clone</strong>(true)).show().click();
})

结果结构能复制，但li元素本身的click事件怎么也运行不了了。
如何解决呢？

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

去掉clone(true),中的true即可（只克隆元素，不克隆事件）。

wenxin_liu

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
jquery中clone与clone(true) 的区别

简介作用：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="<s
复制链接

扫一扫