Using .click() Method with Mobile Safari

Question

I'm running into an issue using mobile Safari where jQuery's .click() method doesn't seem to fire. As far as I can tell, my code seems to be working on all other mobile browsers. Has anyone else run into this issue? It seems like this would be a common problem.

I'm using the .click() method on an anchor to show a login form:

$(".login").click(function(){
  $("#login-form").toggle();
  $("#login-username").focus();
  $(".login").toggle();
});

Any suggestions on what's causing this or a workaround would be greatly appreciated! I've tested the code on all other mobile and desktop browsers and didn't find any issues. Thanks!

Edit - Here is the HTML and relevant CSS:

HTML:

  <div id="login-div">
    <a class="login">Login</a>

    <!-- Login form -->
    <form id="login-form" action="action">
      <div>
        <input type="username" id="login-username" placeholder="email"/>
        <input type="password" id="login-password" placeholder="password"/>
        <input type="submit" id="login-button" value="Sign In"/>
        <div>
          {{> inputErrors}}
          <a class="lost_password">Lost Password?</a>
        </div>
      </div>
    </form>
  </div>

CSS:

#login-div {
  margin: 5px -10px;
  text-align: right;
}

.login {
  vertical-align: -webkit-baseline-middle;
  color: #d4d4d4;
  font-family: "arial";
  font-size: 1rem;
  font-size: 16px;
  font-weight: 200;
}

#login-form {
  display: none;
  width: 100%;
}

#login-username:focus, #login-username:active, #login-password:focus, #login-password:active {
  -moz-box-shadow: 0px 0px 0.5rem 0px #8e8d8d;
  -webkit-box-shadow: 0px 0px 0.5rem 0px #8E8D8D;
  -o-box-shadow: 0px 0px 0.5rem 0px #8e8d8d;
  box-shadow: 0px 0px 0.5rem 0px #8E8D8D;
  outline-color: #8E8D8D;
}

Answer 1

So I ended up getting this to work by moving the anchor out of a higher level div. I don't know why this worked, but if you have tried all the other suggestions for dealing with this quirk in mobile safari, this one might work.

Answer 2

Try adding touchend. click has some gotchas in mobile Safari:

$(".login").on('click touchend', function(){
  $("#login-form").toggle();
  $("#login-username").focus();
  $(".login").toggle();
});