Question

I have a button that the user clicks(.next_1).

<a id="next_btn" class="next_1" href="#">Next</a>

After the user clicks the button, it should change the class to next_2. When the user clicks the button again, it should change it to next_3.

$('.next_1').click(function() { 
  $('#next_btn').removeClass('next_1').addClass('next_2');
});

$('.next_2').live('click', function() {
  $('#next_btn').removeClass('next_2').addClass('next_3');
});

Currently, when the user clicks the button, it changes the class directly to next_3 when it should change it to next_2. Why does the live click function work automatically when it should only happen upon click?

Answer 1

.live() in this case is the same as adding another click handler. I suggest instead using the .toggle() function.

http://api.jquery.com/toggle-event/

$('#next_btn').toggle(function() {
        $('#next_btn').removeClass('next_1').addClass('next_2');
}, function() {
    $('#next_btn').removeClass('next_2').addClass('next_3');
}, function() {
    $('#next_btn').removeClass('next_3').addClass('next_1'); // loops back to start
});