CODEWITHSUNDEEP
jquerytoggle
Tim Stieffenhofer
Tim Stieffenhofer

Reputation: 189

Why does my toggle only work the first time?

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

Upvotes: 2

Views: 246

Answers (2)

Hari Setiawan
Hari Setiawan

Reputation: 136

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

Upvotes: 0

Sumit Patel
Sumit Patel

Reputation: 4638

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>

Upvotes: 1

Related Questions