设置管理员
     
     
取消管理员
 
    
 

$(".e1").on("click",function(){
      $(this).removeClass("e1").addClass("e2").html("取消管理员"); }); $(".e2").on("click",function() {
      $(this).removeClass("e2").addClass("e1").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;     } });