Question

场景

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

问题

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

这是怎么回事？ 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

您需要以不同的方式注册click事件，因为在注册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>

Answer 2

找到以下代码段可能会对您有所帮助而不是发生CLASS的click事件。根据您的要求制作ID 单击条件然后根据条件更改类

$('#anchor').on('click', function () {
	alert('anchor clicked with class: '+$(this).attr('class'));
  if($(this).hasClass("anchor")){
  	$(this).removeClass('anchor').addClass('anchor2');
  }else{
    $(this).removeClass('anchor2').addClass('anchor');
  }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<a href="#" class="anchor" id="anchor">Click me</a>

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

2 个答案: