jQuery给新元素添加事件的疑难杂症!

提壶 发布于 2015/09/22 22:34
阅读 504
收藏 0

我自己在学习jquery,然后用jquery写了一个"添加行"和"删除行"的代码.如下:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="renderer" content="webkit">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css">
.model3{float: left;}
ul{float: left; padding: 0px; margin: 0px; height: 25px;}
ul li input[type="text"]{width:33px;height: 16px;margin: 0px;padding: 0px;border="none";}
ul li{float: left;width: 37px;height: 12px;line-height: 12px;text-align: center;list-style-type: none;}
.l0,.l4{width: 20px;cursor: pointer;padding-top: 3px;visibility: hidden;}
</style>
<title>jQuery</title>
</head>
<body>
<div class="model3">
    <div class="line lineN">
<ul>
<li class="l0">加</li>
<li class="l1"><input type="text" class="m3" value="1" disabled=""></li>
<li class="l2"><input type="text" class="m3" value="" ></li>
<li class="l2"><input type="text" class="m3" value="" ></li>
<li class="l2"><input type="text" class="m3" value="" ></li>
<li class="l2"><input type="text" class="m3" value="" ></li>
<li class="l3"><input type="text" class="m3" value="" ></li>
<li class="l4">减</li>
</ul>
</div>
</div>
</body>
<script type="text/javascript" src="http://libs.baidu.com/jquery/2.0.0/jquery.js" ></script>
<script type="text/javascript">
html="<div class='line lineN'><ul>";
html+="<li class='l0'>";
html+="加";
html+="</li>";
html+="<li class='l1'>";
html+="<input type='text' class='m3' disabled>";
html+="</li>";
html+="<li class='l2'>";
html+="<input type='text' class='m3'>";
html+="</li>";
html+="<li class='l2'>";
html+="<input type='text' class='m3'>";
html+="</li>";
html+="<li class='l2'>";
html+="<input type='text' class='m3'>";
html+="</li>";
html+="<li class='l2'>";
html+="<input type='text' class='m3'>";
html+="</li>";
html+="<li class='l3'>";
html+="<input type='text' class='m3'>";
html+="</li>";
html+="<li class='l4'>";
html+="减";
html+="</li>";
html+="</ul></div>";
var message='over';
//行
$('.model3').on( "mouseover mouseout",".lineN",{msg:message}, function(event) {
if(event.data.msg=='over'){
// console.log('over');
$(this).find(".l0,.l4").css("visibility", "visible");
event.data.msg='out';
}else if (event.data.msg=='out'){
// console.log('out');
$(this).find(".l0,.l4").css("visibility", "hidden");
event.data.msg='over';
}
});
//增
$('.model3').on( "mouseover mouseout",".l0 i",{msg:message}, function(event) {
// console.log(event.data.msg);
if(event.data.msg=='over'){
$(this).css({color:"blue","font-weight":"bold"});
event.data.msg='out';
}else if(event.data.msg=='out'){
$(this).css({color:"black","font-weight":"lighter"});
event.data.msg='over';
}
});
//删
$('.model3').on( "mouseover mouseout",".l4 i",{msg:message}, function(event) {
// console.log(event.data.msg);
if(event.data.msg=='over'){
$(this).css({color:"red","font-weight":"bold"});
event.data.msg='out';
}else if(event.data.msg=='out'){
$(this).css({color:"black","font-weight":"lighter"});
event.data.msg='over';
}
});
$('.model3').on("click",".l0",function() {
lineN = $(this).parents(".lineN");
x = parseInt(lineN.find(".l1>input").val())+1;
lineN.before(html);
lineArr = lineN.prevAll(".lineN");
paixu();
});
$('.model3').on("click",".l4",function() {
lineN = $(this).parents(".lineN");
x = parseInt(lineN.find(".l1>input").val());
lineN.remove();
paixu();
});
function paixu(){
lineN=$(".lineN");
for(var x=0;x<lineN.length;x++){
li=$(lineN[lineN.length-1-x]).find("li");
y=x+1;
$(li[1]).find(":text").val(y);
}
};
</script>
</html>

但是问题就出在,当我新增了几行之后再"删除"其中一行的时候,jquery就出错了.删不到对应的那一行了.

但是如果我改成下面这种.又没有问题了,刚学jquery,底子薄,实在是琢磨不懂,求高人指点:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="renderer" content="webkit">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css">
.model3{float: left;}
ul{float: left; padding: 0px; margin: 0px; height: 25px;}
ul li input[type="text"]{width:33px;height: 16px;margin: 0px;padding: 0px;border="none";}
ul li{float: left;width: 37px;height: 12px;line-height: 12px;text-align: center;list-style-type: none;}
.l0,.l4{width: 20px;cursor: pointer;padding-top: 3px;visibility: hidden;}
</style>
<title>jQuery</title>
</head>
<body>
<div class="model3">
    <div class="line lineN">
<ul>
<li class="l0">加</li>
<li class="l1"><input type="text" class="m3" value="1" disabled=""></li>
<li class="l2"><input type="text" class="m3" value="" ></li>
<li class="l2"><input type="text" class="m3" value="" ></li>
<li class="l2"><input type="text" class="m3" value="" ></li>
<li class="l2"><input type="text" class="m3" value="" ></li>
<li class="l3"><input type="text" class="m3" value="" ></li>
<li class="l4">减</li>
</ul>
</div>
</div>
</body>
<script type="text/javascript" src="http://libs.baidu.com/jquery/2.0.0/jquery.js" ></script>
<script type="text/javascript">
html="<div class='line lineN'><ul>";
html+="<li class='l0'>";
html+="加";
html+="</li>";
html+="<li class='l1'>";
html+="<input type='text' class='m3' disabled>";
html+="</li>";
html+="<li class='l2'>";
html+="<input type='text' class='m3'>";
html+="</li>";
html+="<li class='l2'>";
html+="<input type='text' class='m3'>";
html+="</li>";
html+="<li class='l2'>";
html+="<input type='text' class='m3'>";
html+="</li>";
html+="<li class='l2'>";
html+="<input type='text' class='m3'>";
html+="</li>";
html+="<li class='l3'>";
html+="<input type='text' class='m3'>";
html+="</li>";
html+="<li class='l4'>";
html+="减";
html+="</li>";
html+="</ul></div>";
var message='over';
//行
$('.model3').on( "mouseover",".lineN",{msg:message}, function(event) {
$(this).find(".l0,.l4").css("visibility", "visible");
});
$('.model3').on( "mouseout",".lineN",{msg:message}, function(event) {
$(this).find(".l0,.l4").css("visibility", "hidden");
});
//增
$('.model3').on( "mouseover mouseout",".l0 i",{msg:message}, function(event) {
// console.log(event.data.msg);
if(event.data.msg=='over'){
$(this).css({color:"blue","font-weight":"bold"});
event.data.msg='out';
}else if(event.data.msg=='out'){
$(this).css({color:"black","font-weight":"lighter"});
event.data.msg='over';
}
});
//删
$('.model3').on( "mouseover mouseout",".l4 i",{msg:message}, function(event) {
// console.log(event.data.msg);
if(event.data.msg=='over'){
$(this).css({color:"red","font-weight":"bold"});
event.data.msg='out';
}else if(event.data.msg=='out'){
$(this).css({color:"black","font-weight":"lighter"});
event.data.msg='over';
}
});
$('.model3').on("click",".l0",function() {
lineN = $(this).parents(".lineN");
x = parseInt(lineN.find(".l1>input").val())+1;
lineN.before(html);
lineArr = lineN.prevAll(".lineN");
paixu();
});
$('.model3').on("click",".l4",function() {
lineN = $(this).parents(".lineN");
x = parseInt(lineN.find(".l1>input").val());
lineN.remove();
paixu();
});
function paixu(){
lineN=$(".lineN");
for(var x=0;x<lineN.length;x++){
li=$(lineN[lineN.length-1-x]).find("li");
y=x+1;
$(li[1]).find(":text").val(y);
}
};
</script>
</html>

绿色表示两段唯一的区别!

加载中
0
maradona
maradona
代码太多,贴关键代码就可以了
提壶
提壶
恩.就是两段绿色的代码有问题.都是动态的给页面新增的元素添加事件,当我点击删除后,上面那块绿色的代码就会出错,而下面的就不会.但是我感觉写出来的意思都是一样的,所以不明
返回顶部
顶部