javascript - 更改元素的类属性仍然调用旧事件

Question

场景

我有 class=anchor anchor ，单击它会将其自己的类更改为 anchor2。两次点击事件:anchor &anchor2 将alert($(this).attr('id'))。

问题

问题是，将其类更改为 anchor2 后，它仍然调用旧事件来提醒 anchor2 类。

发生什么事了？ https://jsfiddle.net/3kzs7n9r/13/

编辑

这是我的代码:

<a href="#" class="anchor">Click me</a>

<script>
    $('.anchor').on('click', function () {
      alert('anchor clicked with class: '+$(this).attr('class'));
      $(this).attr('class', 'anchor2');
    });

    $('.anchor2').on('click', function () {
      alert('anchor clicked with class: '+$(this).attr('class'));
      $(this).attr('class', 'anchor');
    });
</script>

Answer 1

您需要以不同的方式注册您的点击事件，因为当您注册anchor2事件时，该元素不存在于DOM上。

<script>
    $(document).on('click','.anchor', function () {
      alert('anchor clicked with class: '+$(this).attr('class'));
      $(this).attr('class', 'anchor2');
    });

    $(document).on('click','.anchor2', function () {
      alert('anchor clicked with class: '+$(this).attr('class'));
      $(this).attr('class', 'anchor');
    });
</script>