Jquery Onclick ne se passe pas une deuxième fois

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

Question

Je suis un peu confus pour expliquer pourquoi cela ne fonctionne pas; Je suppose que parce que je suis d'ajouter la classe et son pas réintégrées dans la collection Je ne suis pas sûr.

Ici, il est sur un jsbin http://jsbin.com/ayije bien que le code est également ci-dessous.

De toute façon, je ne peux obtenir l'action se produise sur un élément une fois. 

<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>
Était-ce utile?

La solution

Il est parce que les gestionnaires de clics ne sont appliqués à ces éléments qui correspondent à la charge du document. Vous devez utiliser une classe distincte pour identifier tous les liens, puis mis en place un seul gestionnaire de clic qui ressemble à la classe que le lien a et fait alors la transformation de la classe appropriée. 

$(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>

Autres conseils

Je ne sais pas si vous connaissez déjà ou pas .... Consultez la documentation jquery sur .live () fonctionnalité. De cette façon, vous pouvez faire quelque chose comme ça. 

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

Et vous n'avez pas à vous soucier des classes non existant à la charge du document. Comme les classes changent les éléments, ils seront automatiquement liés à.

Vous pouvez modifier votre code comme ceci 

$(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;    
});

Vous pouvez également modifier votre gestionnaire de clic au gestionnaire de clic en direct: 

$(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'); 
        });
    });
Licencié sous: CC-BY-SA avec attribution
Non affilié à StackOverflow
scroll top