jquery断断续续的问题

Question

我有一个按钮，它是动态生成的。最初，当你点击它时，它的类变为"active"。当你再次点击时，它应该变为活动。

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

$(".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方法。

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