jquery函数clone与clone(true)的用法区别详解-js教程-PHP中文网

jquery函数clone与clone(true)的用法区别详解

巴扎黑

发布： 2017-06-25 09:58:12

原创

1267 人浏览过

<span style="font-size:18px;"><!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></span>

登录后复制

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

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

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

<span style="font-size:18px;"><li class="more_box"></li>
<li class="tab_more">
     <p 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>
    </p> 
</li></span>

登录后复制

需要实现的效果是id="more_list"下的a单击后，将a克隆并添加到

之中。

<span style="font-size:18px;">$("#more_list>a").click(function(){
    $(".more_box").html($(this).clone(true)).show().click();
})</span>

登录后复制

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

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

<span style="font-size:18px;">$("#more_list>a").click(function(){
  $(".more_box").html($(this).clone()).show().click();
})</span>

登录后复制

以上是jquery函数clone与clone(true)的用法区别详解的详细内容。更多信息请关注PHP中文网其他相关文章！

php8，我来也

30分钟学会网站布局

尚观Oracle入门到精通视频教程

你的第一行 UNI-APP 代码

Flutter 从头到应用启动

兄弟连Linux新版视频教程

AXURE 9视频教程（适合产品经理交互产品设计UI）

零基础PS视频教程

16天带你入门UI视频教程

PS技巧和切片技巧视频教程

阿里云环境搭建以及项目上线视频教程

计算机网络概述——程序员必须掌握的基础知识

程序员必备教程——HTTP协议讲解

Websocket视频教程

jquery函数clone与clone(true)的用法区别详解