ansaurus

Question

Answer 1

+2 A:

It's because the click handlers are only applied to those elements that match at document load. You should use a separate class to identify all of the links, then set up a single click handler that looks at the class that the link has and then does the appropriate class transformation.

$(document).ready(function () {
    $('.clickable').click(function () {
       var $this = $(this);
       if ($this.hasClass('optional')) {
           $this.removeClass('optional').addClass('selected');
       }
       else if ($this.hasClass('selected')) {
            $this.removeClass('selected').addClass('rejected');
       }
       else if ($this.hasClass('rejected')) {
            $this.removeClass('rejected').addClass('optional');
       }
       return false;
    });
});


<div id="tagContainer"> 
    <a href="#" class="clickable rejected">a</a>
    <a href="#" class="clickable optional">b</a>
    <a href="#" class="clickable selected">c</a>
</div>

tvanfosson 2009-09-01 15:10:08

thank you; I had thought it would be just that little bit simpler but you got it - thank you!

Phill Price 2009-09-01 15:17:14

gah there are two ways now; this or live - which to choose :S

Phill Price 2009-09-01 15:20:31

Live applies if you are adding/removing the elements. If the elements themselves (not the classes) remain static there is no need to apply live handlers -- which come with some additional limitations. It may simplify your code somewhat, but at the cost of losing the ability to stop propagation, etc. See the limitations in the docs: http://docs.jquery.com/Events/live#typefn

tvanfosson 2009-09-01 15:34:11

I probably should have said that the problem that live handlers are intended to address are applying handlers to elements that are added/removed. Of course, they can be applied otherwise.

tvanfosson 2009-09-01 15:35:25

Answer 2

A:

You can also change your click handler to the live click handler:

$(document).ready(function () {
     $('.optional').live('click',function () {
      $(this).removeClass('optional').addClass('selected');       return false;
     });
     $('.selected').live('click',function () {
      $(this).removeClass('selected').addClass('rejected');       return false;
     });
     $('.rejected').live('click',function () {
      $(this).removeClass('rejected').addClass('optional'); 
     });
    });

Contra 2009-09-01 15:16:52

gah there are two ways - which to choose :S

Phill Price 2009-09-01 15:19:25

Answer 3

+2 A:

Not sure if you already know about this or not.... Check the jquery documentation on the .live() functionality. That way, you could do something like this.

$('.optional').live('click', function () {
          $(this).removeClass('optional').addClass('selected');
       return false;
         });

And then you don't have to worry about classes not existing at document load. As the classes change on the elements, they'll automatically be bound to.

Anthony 2009-09-01 15:17:21

oh this looks interesting too!

Phill Price 2009-09-01 15:18:53

ansaurus

tags:

views:

answers:

Jquery Onlick not happening second time

related questions