jquery как изменить имя класса и прикрепить обработчики событий для измененного класса

Question

Я пытаюсь изменить класс элемента div и написать функцию щелчка для имен классов.

1. щелкать «editthis» Я вход «editthis» и удаление класса «editthis» и добавив класс «savethis»

2. У меня есть для класса нажмите функцию «savethis», но это клики событие не выполняется он записывает «editthis» всегда, но имя класса изменено на «savethis», но функция нажмите на «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> 
   

, если не ясно, пожалуйста, обратитесь постараюсь предоставить более подробную информацию.

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 я поставил бы работать, но лучше делегировать родителей ближе к кнопке.