jQuery klicken Ereignis wird nur einmal ausgelöst

Question

In meiner Seite habe ich zwei verschiedene Formen. Ich möchte, dass Benutzer jeweils ein Formular sehen und zwischen den Formularen wechseln, wenn der Benutzer auf einen Link klickt.

Um dies zu erreichen, habe ich einen Link in den beiden Formularen eingefügt und binde das click -Ereignis, so dass der Benutzer beim Klicken darauf das Formular sieht, das nicht sichtbar ist.

Das Problem ist, dass ich das in jQuery nicht implementieren konnte.
Hier mein HTML ist:

<div class="col-md-6 loginPanel"> 
    <div class="panel panel-default myFormContainer"> 
    <div class="panel-heading myPanelHeadingContainer"> 
     <h3 class="panel-title"> 
     Login 
     <span class="flipper"> 
      <a href="#">Flip</a> 
     </span> 
     </h3> 
    </div> 
    <div class="panel-body"> 
     <form> 
     <div class="form-group"> 
      <label for="authCode">Authentication Code</label> 
      <input type="password" class="form-control" id="authCode" placeholder="Auth Code"> 
     </div> 
     <button type="submit" class="btn btn-default">Submit</button> 
     </form> 
    </div> 
    </div> 
</div> 

<div class="col-md-6 registerPanel"> 
    <div class="panel panel-default myFormContainer"> 
    <div class="panel-heading myPanelHeadingContainer"> 
     <h3 class="panel-title"> 
     Register 
     <span class="flipper"> 
      <a href="#">Flip</a> 
     </span> 
     </h3> 
    </div> 
    <div class="panel-body"> 
     <form> 
     <div class="form-group"> 
      <label for="newAuthCode">New Authentication Code</label> 
      <input type="password" class="form-control" id="newAuthCode" placeholder="New Auth Code"> 
     </div> 
     <div class="form-group"> 
      <label for="clientSecret">Client Secret</label> 
      <input type="password" class="form-control" id="clientSecret" placeholder="Client Secret"> 
     </div> 
     <button type="submit" class="btn btn-default">Submit</button> 
     </form> 
    </div> 
    </div> 

Im HTML-Code oben habe ich den Link in einem span gewickelt und es die Klasse flipper gegeben.

Hier ist meine jQuery:

$(document).ready(function() { 
    $('.registerPanel').first().hide(); 
    var flipper1 = $('.flipper').first(); 
    var flipper2 = $('.flipper').get(1); 

    flipper1.click(function() { 
    $('.loginPanel').first().hide(); 
    $('.registerPanel').first().show(400); 
    }); 

    flipper2.click(function() { 
    $('.registerPanel').first().hide(); 
    $('.loginPanel').first().show(400); 
    }); 
}); 

In dem obigen Code, ich binded absichtlich das Click-Ereignis auf das span Element unter der Annahme, dass, wenn etwas im Inneren angeklickt wird, wird das Click-Ereignis für span abzufeuern.

Außerdem sind flipper1 und flipper2 zwei die zwei Variablen, die sich auf zwei span Elemente beziehen, die sich auf zwei verschiedene Formen beziehen.

Am Anfang, wenn keine Klicks auftreten und keine Ereignisse ausgelöst werden, wird erwartet, dass die loginPanel sichtbar ist (deshalb habe ich registerPanel versteckt).
Wenn ich auf den Link Flip klicke, verbirgt es die loginPanel und zeigt registerPanel wie erwartet, aber wenn ich auf den Link in registerPanel klicke, passiert nichts (d. H. Ich kann nicht zurück zu loginPanel gehen).

Kann jemand sagen, was falsch ist und wenn möglich, schlagen Sie bitte eine gute Lösung vor. Vielen Dank!

Answer 1

.get() Die Methode gibt die DOM-Elemente zurück, die vom jQuery-Objekt abgeglichen wurden. Dies könnte der Grund dafür sein, dass der zweite Klick nicht erfolgt.

So können Sie eq Selektor hier verwenden möchten:

$('.registerPanel').first().hide(); 
var flipper1 = $('.flipper:eq(0)'); 
var flipper2 = $('.flipper:eq(1)'); 

flipper1.click(function() { 
    $('.loginPanel').first().hide(); 
    $('.registerPanel').first().show(400); 
}); 

flipper2.click(function() { 
    $('.registerPanel').first().hide(); 
    $('.loginPanel').first().show(400); 
}); 

Answer 2

var flipper1 = $('.flipper').first(); 
var flipper2 = $('.flipper').last(); 

ist das Problem mit dem .get(1), wird das Ereignis nicht darauf hinzukommen wie .get() kehrt Elemente DOM, aber .first() und .last() gibt jQuery-Objekte zurück.