Question

I have a set of buttons(previous & next) that the user clicks.

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

When the user clicks on the next button(.next_1), it changes the class name of the button to next_2 and changes the the previous button(.prev_1) to prev_2. Once the class name is changed, the click function that is set for prev_2 doesn’t work.

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

$('.prev_2').click(function() {
  alert('this works');
});

Why does the click function not work after I change the class using jquery?

Answer 1

That’s because the bindings are defined at load. If you want them to work dynamically, bind teh click’s via LIVE.

$('.prev_2').live('click', function() {
       alert('hi!');
});