Why does my toggle only work the first time?

Question

My toggles work both fine, but only the first time. Whats wrong with it?

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

You should post your html code. Also write what kind of behaviour that you wanna achieve here — Hari Setiawan, Jul 24 '19 at 11:27
When you bind the click handler `$(".is-on-list").click()`, the element does not yet have the class `.is-on-list`. You need to defer the click event to an ancestor: https://stackoverflow.com/a/9331127/746736 — Turnip, Jul 24 '19 at 11:28
I'd just like to toggle between the classes .is-on-list and .add-to-list plus having an animation that is stored in class .appear that should happen on every click — Tim Stieffenhofer, Jul 24 '19 at 11:29

score 1 · Answer 1 · answered Jul 24 '19 at 11:50

try this code:

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>

score 0 · Accepted Answer · answered Jul 24 '19 at 12:19

Since you are only initializing the .click listener once, using that .click code, the second time you click it won't work.

Because the code only bind the listener on the class once.

If you're going to have a listener on a dynamically added element, use it like this

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

Why does my toggle only work the first time?

2 Answers2