使用jquery在DOM中更改锚类

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');
});

我想改变锚标签的行为.但它不起作用.我每次都得到'behaviour1'.它没有变成'behavour2'.

我如何让它工作？

Answer 1

事件处理程序附加在页面加载上,稍后更改类不会更改事件处理程序,它们仍然附加到相同的元素,而不管您稍后添加哪些类.

你必须委托或改变它的完全工作方式,第一个选项是最简单的:

$(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为锚的父元素

或一个简单的拨动开关:

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

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