<!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;
}
});
