jqueryクラス名を変更し、変更されたクラスのイベントハンドラをアタッチする方法

Question

div要素のクラスを変更し、クラス名のクリック機能を作成しようとしています。クリックで

1. 私はクラスのsavethis 'の機能をクリックしていますが、このクリックイベントではありませんログイン「editthis」とクラスを削除する「editthis」とクラスのsavethis "

2. を追加してい「editthis」それは常に「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私は仕事と言えば、それはボタンに近い親に委任するのが最善です。