Jquery Onclick not happening second time

StackOverflow https://stackoverflow.com/questions/1362965

Question

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>
Was it helpful?

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>

OTHER TIPS

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.

You can change your code like this

$(document).on("click", ".clickable", 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;    
});

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'); 
        });
    });
Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top