jquery - jquery开和关问题

Question

我有一个按钮，它是动态生成的。最初，当您单击它时，它具有“活动”类，该类更改为“非活动”。当您再次单击时，它应该变为活动状态。

所以我使用以下代码分配了点击事件。

$(".active").on("click",function(){
$(this).removeClass('active').addClass('inactive');
});

$(".inactive").on("click",function(){
$(this).removeClass('inactive').addClass('active');
});

问题是每次调用第一个函数时。当我使用 live 而不是 on 它工作正常。我怎样才能解决这个问题。

Answer 1

您不能简单地更改.live为.on,

$(selector).live(event_type, function(){});

和

$(document).on(event_type, selector, function(){});

$("body").on("click", '.active', function(){
  $(this).removeClass('active').addClass('inactive');
});

$("body").on("click", '.inactive', function(){
  $(this).removeClass('inactive').addClass('active');
});

Answer 2

一种需要对 HTML 进行细微更改的选项是：

$(function(){    
    $(".toggle").on("click", function(){
        $(this).toggleClass("active").toggleClass("inactive");
    });    
});

​这将影响分配给它们的类的所有元素toggle，并假设它最初将具有inactive或active。

Answer 3

试试jquery的toggleClass方法。

我在这里写了一个演示，演示了为链接实现相同功能的两种方法。你可以对按钮做同样的事情。