【jQuery】clone(false)与clone(true)

姬姬姬姬姬姬

于 2021-11-28 08:36:32 发布

阅读量449

点赞数 3

分类专栏： jQUery 文章标签： javascript jquery 开发语言

本文链接：https://blog.csdn.net/m0_51491785/article/details/121587029

版权

jQUery 专栏收录该内容

7 篇文章 0 订阅

订阅专栏

clone(false)：浅拷贝，只拷贝标签本身，JavaScript中绑定的事件并不拷贝，不写false，则默认也是false

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>clone(false)</title>
		<script src="js/jquery-3.3.1.js"></script>
	</head>
	<body>
		<span style="cursor: pointer;">床前明月光</span>
		<script type="text/javascript">
			function test(){
				alert("疑是地上霜");
			}
			$("span").bind("click",test);
			$("span").after($("span").clone(false));
		</script>
	</body>
</html>

点击第一个“床前明月光”会出现以下弹窗提示，而点第二个“床前明月光”却没有提示：

clone(true)：深拷贝，不但拷贝标签本身，JavaScript中绑定的事件也一起拷贝

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>clone(true)</title>
		<script src="js/jquery-3.3.1.js"></script>
	</head>
	<body>
		<span style="cursor: pointer;">床前明月光</span>
		<script type="text/javascript">
			function test(){
				alert("疑是地上霜");
			}
			$("span").bind("click",test);
			$("span").after($("span").clone(true));
		</script>
	</body>
</html>

这样的话无论点击哪个“床前明月光”都会出现下面的弹窗提示：