Jquery Onclick not happening second time

前端 未结 4 714
轻奢々
轻奢々 2021-01-20 10:38

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 i

相关标签:
4条回答
  • 2021-01-20 10:58

    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.

    0 讨论(0)
  • 2021-01-20 11:13

    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>
    
    0 讨论(0)
  • 2021-01-20 11:14

    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;    
    });
    
    0 讨论(0)
  • 2021-01-20 11:18

    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'); 
            });
        });
    
    0 讨论(0)
提交回复
热议问题