Question

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

点击'editthis'我正在记录'editthis'并删除课程'editthis'并添加课程'savethis'

我有类'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

将事件处理委托给父元素。

$(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我认为可行，但最好委托给靠近按钮的父母。

Answer 2

尝试这种方式：

<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>

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

2 个答案: