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

今天我写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>

之后就可以了。

更多相关文章

随机推荐