jquery如何更改类名称并附加更改的类的事件处理程序

Question

我正在尝试更改div元素的类并为类名写入单击函数。

上点击
1. “editthis”我记录“editthis”和取出类的editthis'并添加类的savethis“

2. 我点击功能类“savethis”，但这个点击事件不是执行它记录“editthis”始终，但是类名称变更为“savethis”，但不执行

   <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> 
   
   
   <script> 
       $(function(){ 
       $('.editthis').on('click', function(){ 
        console.log('editthis');        
        $(this).text('SAVE'); 
        $(this).removeClass('editthis'); 
        $(this).addClass('savethis'); 
       }); 
       $('.savethis').on('click', function(){ 
        console.log('savethis');        
        $(this).text('EDIT'); 
        $(this).removeClass('savethis'); 
        $(this).addClass('editthis'); 
       }); 
   }); 
   </script> 
   
   
   <div class="editthis">EDIT</div> 
   

上“savethis”点击功能，如果它是不明确的，请让我将尽力提供更多细节。

Answer 1

试试这个方法：

<script> 
$(function(){ 
    $(document).on('click','.editthis', function(){ 
     console.log('editthis');        
     $(this).text('SAVE'); 
     $(this).removeClass('editthis'); 
     $(this).addClass('savethis'); 
    }); 
    $(document).on('click','.savethis', function(){ 
    console.log('savethis');        
    $(this).text('EDIT'); 
    $(this).removeClass('savethis'); 
    $(this).addClass('editthis'); 
    }); 
}); 
</script> 

Answer 2

代表事件处理到父元素。

$(function(){ 
    $(document).on('click', '.editthis', function(){ 
     console.log('editthis');        
     $(this).text('SAVE'); 
     $(this).removeClass('editthis'); 
     $(this).addClass('savethis'); 
    }).on('click', '.savethis', function(){ 
     console.log('savethis');        
     $(this).text('EDIT'); 
     $(this).removeClass('savethis'); 
     $(this).addClass('editthis'); 
    }); 
}); 

的document我把会的工作，但最好是委托给父母靠近按钮。