首页 > web前端 > js教程 > 正文

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

巴扎黑
发布: 2017-06-25 09:58:12
原创
1379人浏览过

<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中文网其它相关文章!

  • 最佳 Windows 性能的顶级免费优化软件
    最佳 Windows 性能的顶级免费优化软件

    每个人都需要一台速度更快、更稳定的 PC。随着时间的推移,垃圾文件、旧注册表数据和不必要的后台进程会占用资源并降低性能。幸运的是,许多工具可以让 Windows 保持平稳运行。

    下载
    来源:php中文网
    本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn
    最新问题
    开源免费商场系统广告
    热门教程
    更多>
    最新下载
    更多>
    网站特效
    网站源码
    网站素材
    前端模板
    关于我们 免责申明 意见反馈 讲师合作 广告合作 最新更新
    php中文网:公益在线php培训,帮助PHP学习者快速成长!
    关注服务号 技术交流群
    PHP中文网订阅号
    每天精选资源文章推送
    PHP中文网APP
    随时随地碎片化学习
    PHP中文网抖音号
    发现有趣的

    Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号