为什么我的切换只在第一次工作？答案

【问题标题】：Why does my toggle only work the first time?为什么我的切换只在第一次工作？
【发布时间】：2019-07-24 20:19:32
【问题描述】：

我的切换都可以正常工作，但只是第一次。有什么问题？

$(".add-to-list").click(function(){ 
 $(this).removeClass( "appear" );      
 $(this).addClass( "is-on-list appear" );    
 $(this).removeClass( "add-to-list" );         
});

$(".is-on-list").click(function(){   
 $(this).removeClass( "appear" );     
 $(this).addClass( "add-to-list appear" );     
 $(this).removeClass( "is-on-list" );      
});

【问题讨论】：

您应该发布您的 html 代码。还要在这里写下你想要实现什么样的行为
jsfiddle.net/81f5s67e
当您绑定点击处理程序$(".is-on-list").click() 时，该元素还没有.is-on-list 类。您需要将点击事件推迟到祖先：stackoverflow.com/a/9331127/746736
我只想在 .is-on-list 和 .add-to-list 类之间切换，还有一个存储在 .appear 类中的动画，每次点击都会发生跨度>
看这个：jsfiddle.net/Lvz1hka8

标签： jquery toggle

【解决方案1】：

试试这个代码：

var selector = 'button';

$(selector).on('click', function(){
    $(this).toggleClass('active');
});

.active{color:green;}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button class="add-to-list">Hi</button>
<button class="is-on-list">there</button>

【讨论】：

【解决方案2】：

由于您只初始化了一次 .click 侦听器，使用该 .click 代码，第二次单击它将不起作用。

因为代码只在类上绑定了一次监听器。

如果您要在动态添加的元素上设置监听器，请像这样使用它

$(document).on('click', '.add-to-list', function(){ 
 $(this).removeClass( "appear" );      
 $(this).addClass( "is-on-list appear" );    
 $(this).removeClass( "add-to-list" );         
});

$(document).on('click', '.is-on-list', function(){   
 $(this).removeClass( "appear" );     
 $(this).addClass( "add-to-list appear" );     
 $(this).removeClass( "is-on-list" );      
});

【讨论】：