javascript - 使用 jquery 更改 DOM 中的 anchor 类

Question

<a class="behaviour1" href="link1">Test</a>

我有两个“behaviour1”和“behaviour2”类的点击事件。

$('.behaviour1').click(function() {
    alert('behaviour - 1');
    $(this).prop('class', 'behaviour2');
});

$('.behaviour2').click(function() {
    alert('behaviour - 2');
    $(this).prop('class', 'behaviour1');
});

我想更改 anchor 标记的行为。但这不起作用。我每次都会收到“behaviour1”。它不会改变为“behavour2”。

如何让它工作？

Answer 1

事件处理程序附加在页面加载时，稍后更改类不会更改事件处理程序，无论您稍后添加什么类，它们仍然附加到相同的元素。

您必须完全委托(delegate)或更改其工作方式，第一个选项是最简单的:

$(document).on('click', '.behaviour1', function() {
    alert('behaviour - 1');
    $(this).prop('className', 'behaviour2');
});

$(document).on('click', '.behaviour2', function() {
    alert('behaviour - 2');
    changeBehaviour();
    $(this).prop('className', 'behaviour1');
});

将 document 替换为 anchor 的父元素

或者一个简单的切换开关:

$('.behaviour').on('click', function() {
     if ( $(this).data('flag') ) {
         // do behaviour 1
     }else{
         // do behaviour 2
     }

     $(this).data('flag', !$(this).data('flag'));
});