用replaceWith()对DOM结点操作时应注意的问题

最新推荐文章于 2021-10-20 21:43:38 发布

Blue_EnchanTreSS_

最新推荐文章于 2021-10-20 21:43:38 发布

阅读量872

点赞数

分类专栏： jQuery 文章标签： jQuery replaceWith 只能用一次 dom结点操作出错

本文链接：https://blog.csdn.net/Blue_EnchanTreSS_/article/details/50769033

版权

jQuery 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

今天我写jquery的时候遇到了一点问题，有点奇怪。用replaceWith()操作Dom结点的时候，当我对一个div操作之后，再对这个相同的div进行同样的操作之后就不灵了，莫名其妙啊。

于是我写了一些代码测试一下，大致的流程是：点击最面的div，出现11，点击下面的div，出现22，再点击上面的div，没有11出现了。原来的代码如下：

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<style type="text/css">
div{
	width:100px;
	height:100px;
	background-color:#CCFFFF;
	border:#FF0000 solid 2px;
}
</style>
<script language="javascript" src="file:///F|/jQuery/jquery-1.12.0.min.js"></script>    //此处引入jquery库
<script language="javascript">
$(function(){
	$('div').eq(0).click(function(){
		$('div').eq(0).replaceWith('<div>11</div>');
		});
	$('div').eq(1).click(function(){
	$('div').eq(0).replaceWith('<div>22</div>');
	});
		});
</script>
</head>

<body>
<div></div>
<div></div>
</body>
</html>

后来一个大神跟我说：

用了一个replaceWith然后把replaceWith后面的div替换了当前的div导致replaceWith后面的div变成了第一个可是他变成了第一个又没有给他绑定点击事件所以就会出现这种情况了。

改过的代码如下：

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<style type="text/css">
div{
	width:100px;
	height:100px;
	background-color:#CCFFFF;
	border:#FF0000 solid 2px;
}
</style>
<script language="javascript" src="file:///F|/jQuery/jquery-1.12.0.min.js"></script>
<script language="javascript">
function initClick(){
	$('div').eq(0).click(function(){
		$('div').eq(0).replaceWith('<div onclick>11</div>');
		initClick();
	});
	$('div').eq(1).click(function(){
		$('div').eq(0).replaceWith('<div>22</div>');
		initClick();
	});
}
$(function(){
	$('div').eq(0).click(function(){
		$('div').eq(0).replaceWith('<div onclick>11</div>');
		initClick();
	});
	$('div').eq(1).click(function(){
		$('div').eq(0).replaceWith('<div>22</div>');
		initClick();
	});
});
</script>

</head>

<body>
<div></div>
<div></div>
</body>
</html>

之后就可以了。

Blue_EnchanTreSS_

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
用replaceWith()对DOM结点操作时应注意的问题

今天我写jquery的时候遇到了一点问题，有点奇怪。用replaceWith()操作Dom结点的时候，当我对一个div操作之后，再对这个相同的div进行同样的操作之后就不灵了，莫名其妙啊。于是我写了一些代码测试一下，大致的流程是：点击最面的div，出现11，点击下面的div，出现22，再点击上面的div，没有11出现了。原来的代码如下：无标题文档div{ width:100p
复制链接

扫一扫