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我把會的工作，但最好是委託給父母靠近按鈕。