jQuery之克隆事件--clone()与clone(true)区别
clone()与clone(true)同为克隆
clone()表示复制标签本身,
clone(true)会将标签绑定的事件一起复制
来看案例:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<style>
.c1 {
background-color: red;
}
</style>
<body>
<input type="button" class="c1" value="点我复制"> <script>
var $bEle = $(".c1");
$bEle.on("click",function () {
$bEle.clone(true).insertAfter(this) //或者 $bEle.clone(this).insertAfter(this)
})
</script>
</body>
</html>
显示效果

这三个按钮都可以点击并实现复制以此往后插入。
如果JS部分代码该为这样:
<script>
var $bEle = $(".c1");
$bEle.on("click",function () {
$bEle.clone().insertAfter(this)
})
</script>
那么仅仅只有第一个按钮可以通过点击实现自我复制,后面克隆得到的其他按钮都没有复制事件
jQuery之克隆事件--clone()与clone(true)区别的更多相关文章
- [转]jQuery中clone和clone(true)的区别
jquery中clone() 和 clone(true)的区别. jquery复制 DOM的时候,原来还可以连 dom上面绑定的事件一起复制. 原文: https://www.cnblogs.com/ ...
- jQuery中clone和clone(true)的区别
今天要写的是clone和clone(true)的区别 两者长得很像呀,clone(true)比clone() 多了一个true.看下图白白的牙,笑起来就是这么灿烂.有了true就跟笑起来一样,有了笑 ...
- clone()与clone(true)的区别
clone()方法用于复制一个元素,但是被复制出来的元素不具备复制的功能,如果希望被复制出来的元素也具备复制的功能,需要给clone()方法加上true这个参数,即clone(true). 例如: & ...
- jQuery的属性,事件及操作
1.属性操作 1.1 基本属性操作 $("img").attr("src") 返回文档中所有图像的src属性值 $("img").attr( ...
- 前端之JQuery:JQuery扩展和事件
jQuery之jQuery扩展和事件 一.jQuery事件 常用事件 blur([[data],fn]) 失去焦点 focus([[data],fn]) 获取焦点( 搜索框例子) change([[d ...
- jQuery学习笔记:整理一些常用的jQuery操作DOM事件
1.attr() .removeAttr() .attr() 方法可以传入一个名值对的参数,也可以传入一个包含2个以上名值对的对象参数,例如: .attr('src','images/a.jpg'); ...
- 第一百七十一节,jQuery,高级事件,模拟操作,命名空间,事件委托,on、off 和 one
jQuery,高级事件,模拟操作,命名空间,事件委托,on.off 和 one 学习要点: 1.模拟操作 2.命名空间 3.事件委托 4.on.off 和 one jQuery 不但封装了大量常用的事 ...
- jQuery 效果函数,jquery文档操作,jQuery属性操作方法,jQuerycss操作函数,jQuery参考手册-事件,jQuery选择器
jQuery 效果函数 方法 描述 animate() 对被选元素应用“自定义”的动画 clearQueue() 对被选元素移除所有排队的函数(仍未运行的) delay() 对被选元素的所有排队函数( ...
- ajax的status为201依然触发jquery的error事件的问题
昨天在调试一个ajax的时候发现,即使status是201,仍然会触发jquery的error事件.statusText是"parseerror". 通过在stackoverflo ...
随机推荐
- 一文学会redis从零到入门
本文参照视屏学习整理:https://www.bilibili.com/video/av16841549/?p=9 相关软件.资料: 基本条件:有虚拟机或相关linux系统,熟悉基本linux操作 本 ...
- Markdown使用教程(转载收藏)
基础语法 标题 Markdown支持6种级别的标题,对应html标签 h1 ~ h6 # h1 ## h2 ### h3 #### h4 ##### h5 ###### h6 以上标记效果如下: h1 ...
- 在当前目录下配置ansible
配置ansible.cfg [defaults] inventory = myhost # 指定主机清单文件 host_key_checking = False 配置主机清单文件 [node] nod ...
- 【leetcode】1289. Minimum Falling Path Sum II
题目如下: Given a square grid of integers arr, a falling path with non-zero shifts is a choice of exactl ...
- Luogu P3527 [POI2011]MET-Meteors 整体二分
思路:整体二分 提交:4次 错因:树状数组开的$int$ 题解: 二分操作序列,将仅用$[l,md]$即可满足要求的国家递归到左半边,将仅用$[l,md]$不能满足要求的国家,把他们的要求去掉左半边的 ...
- springboot的application.yml配置详解
https://www.cnblogs.com/lqtbk/p/9843401.html https://blog.csdn.net/yelllowcong/article/details/79216 ...
- HTML JS 弹层后底部页面禁止滚动处理
1.打开新页面时需要禁止鼠标滚轮,禁止页面滑动: 1 2 3 4 在调用显示层时加上这句js代码就可以了: document.documentElement.style.overflow = &quo ...
- HDU - 6150 构造题
最近的vj好垃圾,老崩,实名吐槽 HDU - 6150 题意:给出一个错误的求最小点覆盖的函数,需要来构造一组样例,使得那个函数跑出来的答案是正解的3倍以上. 很巧妙的构造技巧,首先想法就是弄一个二分 ...
- 如何将ubuntu16.04升级到ubuntu 18.04?
答:步骤如下: 1. sudo apt update (更新软件源) 2. sudo apt upgrade (更新内核相关的包) 3. sudo apt dist-upgrade 4. sudo ...
- vscode 设置 eclipse 快捷键
点击安装之后,默认就是要ecliplse快捷键了 注意:部分快捷键可能会由于和原来的冲突而失效,例如快速在“下面插入行” ,我还是不能使用ecliplse的Shift+Enter,而要用Ctrl+En ...