js性能优化-事件委托(2)

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8" />
<title>js性能优化</title>
<script type="text/javascript" src="script/jquery.js"></script>
</head>
<body>
<ul id='list'>
<li class="q1 w1 e1">设置管理员</li>
<li class="q2 w2 e2">取消管理员</li>
</ul>

<script>
$(".e1").on("click",function(){
$(this).removeClass("e1").addClass("e2").html("取消管理员");
});
$(".e2").on("click",function() {
$(this).removeClass("e2").addClass("e1").html("设置管理员");
});
</script>
</body>
</html>

需求:点击第一个li后,class里面的e1变成e2,文字变成取消管理员。第二次点击第一个li后,class里的e2变成e1,文字变成设置管理员。
问题:一开始我如上所示,用JQ写的,但是发现随着class的变化,绑定的事件并没有伴随着一起。当变化class后,事件没了。
解决办法:JQ怎么解决我没有去探究,想了下还是用原生的算了,使用事件委托来处理,如下(上面的是个demo,下面的是项目里面直接考出来的,没有整理成demo,这样写更具代表性吧):

var dom = document.getElementById("list");
dom.addEventListener("click",function(){
var userId = $(event.target).parent().parent().find(".operatorid").val();//这里最开始我失误用的是$(this),打印出来后才发现这个this是指向的委托元素,导致这个id始终不变,改成event.target就行了。
switch(event.target.classList[2]){
case "e1":
var json = {"userId":userId,"isAutSystem":1};
$.ajax({
type:"post",
async:false,
url:"autveAutSystem.action",
data:json,
datatype:"text",
success:function(data){
if(data.isOk == true){
event.target.innerHTML = "取消管理员";
event.target.classList.remove("e1");
event.target.classList.add("e2");
}
}
});
break;

case "e2":
var json = {"userId":userId,"isAutSystem":0};
$.ajax({
type:"post",
async:false,
url:"autveAutSystem.action",
data:json,
datatype:"text",
success:function(data){
if(data.isOk == true){
event.target.innerHTML = "设置管理员";
event.target.classList.remove("e2");
event.target.classList.add("e1");
}
}
});
break;
}
});

你可能感兴趣的:(js性能优化-事件委托(2))