Jquery Onclick not happening second time

click, collections, iteration, jquery, repeat

Solution

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>

Problem

I'm a bit confused as to why this isn't working; I assume that because I'm adding the class and its not being added back into the collection I'm not sure. Here it is on a jsbin http://jsbin.com/ayije although code is below also. Either way I can only get the action to happen on an element once. ``` <html> <head> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js" type="text/javascript"></script> <script type="text/javascript" charset="utf-8"> $(document).ready(function () { $('.optional').click(function () { $(this).removeClass('optional').addClass('selected'); return false; }); $('.selected').click(function () { $(this).removeClass('selected').addClass('rejected'); return false; }); $('.rejected').click(function () { $(this).removeClass('rejected').addClass('optional'); return false; }); }); </script> </head> <body> <style> a {padding:2px;color:white;} .optional {background-color:blue;} .selected {background-color:green;} .rejected {background-color:red;} </style> <div id="tagContainer"> <a href="#" class="rejected">a</a> <a href="#" class="optional"">b</a> <a href="#" class="selected">c</a> </div> </body> </html> ```

Original source