jQuery click event is triggered only once

Question

In my page I have two different forms. I want user to see one form at a time and switch between the forms when user clicks a link.

To achieve that, I included a link in both the forms and binded the click event so that when it's clicked user sees the form other than what's already visible.

The problem is that I couldn't implement that in jQuery.
Here is my HTML:

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

In the HTML code above, I have wrapped the link inside a span and given it the class flipper .

Here is my 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 the code above, I intentionally binded the click event to the span element assuming that when something inside it is clicked, the click event for span will fire.

Also, flipper1 and flipper2 two are the two variables holding reference to two span elements relating to two different forms.

Initially, when no clicks happen and no events fire, the loginPanel is expected to be visible (that's why I hid registerPanel ).
When I click the Flip link, it hides the loginPanel and shows registerPanel as expected but when I click the link in registerPanel , nothing happens (ie I can't go back to loginPanel ).

Can someone tell what's wrong and if possible, please suggest a good fix. Thanks!

Answer 1

.get() method returns the DOM elements matched by the jQuery object, so that might be the reason that second click is not happening.

So, you can use eq selector here like:

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

the problem is with the .get(1) , the event doesn't get added to it as .get() returns DOM elements, but .first() and .last() return jQuery objects.