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

Answer 2

DEMO

$(document).on('click','.behaviour1, .behaviour2', function() {
    $(this).toggleClass('behaviour1 behaviour2');
    if($(this).hasClass('behaviour1')) {
        alert('behaviour - 1');
    } else {
        alert('behaviour - 2');
    }
});

Answer 3

交换班级

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

fiddle Demo

使用jquery在DOM中更改锚类

3 个答案: