为什么我的切换仅在第一次使用？

Question

我的切换开关都可以正常工作，但仅限第一次。怎么了？

$(".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" );      
});

Answer 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>

Answer 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" );      
});