Jquery Onclick non accade seconda volta

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

Domanda

Sono un po 'confusa sul motivo per cui questo non sta funzionando; Suppongo che perché sto aggiungendo la classe e la sua non è che viene aggiunto nuovo nella collezione non sono sicuro.

Qui si trova su una http://jsbin.com/ayije anche se il codice è al di sotto anche.

In ogni caso posso solo ottenere l'azione avvenga su un elemento, una volta. 

<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>
È stato utile?

Soluzione

E 'perché i gestori di clic vengono applicate solo a quegli elementi che corrispondono a carico del documento. Si consiglia di utilizzare una classe separata per identificare tutti i collegamenti, quindi impostare un singolo gestore di clic che guarda alla classe che il collegamento ha e poi fa la trasformazione classe appropriata. 

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

Altri suggerimenti

Non è sicuro se si conosce già su questo o no .... controllare la documentazione jquery sul .Live () funzionalità. In questo modo, si potrebbe fare qualcosa di simile. 

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

E allora non dovete preoccuparvi di classi non esistenti a carico del documento. Come cambiano le classi sugli elementi, verrà automaticamente essere vincolati a.

È possibile modificare il codice come questo 

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

È anche possibile modificare il gestore di clic al gestore di scatto dal vivo: 

$(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'); 
        });
    });
Autorizzato sotto: CC-BY-SA insieme a attribuzione
Non affiliato a StackOverflow
scroll top