jquery - replacing <a> button in defined circumstances

Question

i have created list of elements. if one element is highlighted (using buttons 'prev' and 'next'), it gets 'active' class. if 'add element' button has been pressed, element gets class 'selected'. but if an active element is selected too, i want to replace 'add button' with 'remove button' - which removes class 'selected' from active element.

here's some code:

 if ( $('.active').hasClass('selected') ) {
        $('.add').replaceWith('<a href="#" class="add">Usuń zdjęcie</a>');
     $('.add').click(function() {
      $('.active').removeClass('selected');
      return false;
     });
    }
    else {
     $('.add').click(function() {
      $('.active').addClass('selected');
      return false;
     });
    }

it doesn't work (nothing changes). what's wrong? :|

Answer 1

Is the code called only on page load? If so the code inside the else block never gets executed.

Answer 2

I'm not entirely sure, but I think the problem is that the code is in the ready block, I think maybe you need to move the

$('.add').replaceWith('Usuń zdjęcie');
$('.add').click(function() {
  $('.active').removeClass('selected');
  return false;
});

part to the

$('.add').click(function() {});

As currently the code only takes effect if the classes have class "selected" on page load, not if they are added later.

Hope that helps...