Jquery Onclick nicht passiert zweites Mal

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

Frage

Ich bin ein wenig verwirrt, warum dies nicht funktioniert; Ich gehe davon aus, dass, weil ich die Klasse bin das Hinzufügen und es ist nicht zu werden zurück in die Kollektion aufgenommen Ich bin nicht sicher.

Hier ist es auf einem jsbin http://jsbin.com/ayije obwohl Code unten auch ist.

So oder so kann ich die Aktion bekommen nur auf ein Element passieren einmal. 

<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>
War es hilfreich?

Lösung

Es ist, weil die Klick-Handler nur auf die Elemente angewendet werden, dass bei Dokument Lasttoranpassung. Sie sollten eine separate Klasse verwenden alle Verbindungen zu identifizieren, dann einen einzigen Klick-Handler eingerichtet, dass bei der Klasse sieht, dass der Link hat und dann funktioniert die entsprechende Klasse 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>

Andere Tipps

Nicht sicher, ob Sie bereits darüber Bescheid wissen oder nicht .... Schauen Sie sich die Jquery-Dokumentation auf der .live () Funktionalität. Auf diese Weise, Sie so etwas tun könnte. 

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

Und dann haben Sie keine Sorgen zu machen über die Klassen nicht auf Beleglast vorhanden ist. Da die Klassen auf die Elemente ändern, werden sie automatisch gebunden werden.

Sie können den Code wie dieser

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

Sie können auch Ihre Click-Handler auf den Live-Click-Handler ändern: 

$(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'); 
        });
    });
Lizenziert unter: CC-BY-SA mit Zuschreibung
Nicht verbunden mit StackOverflow
scroll top