Скрыть форму при нажатии / выходе элемента

Question

У меня есть пара форм на одной странице. Каждому нужно прятаться, когда я нажимаю снаружи

div class="login">
  <p><a title="Entrar" href="static-login.html">Entrar</a></p>
  <form action="" class="disabled" method="post" id="login">
    <p class="close"><a title="Cerrar" href="static.html">Cerrar</a></p>
    <h2>¿Es usted ya cliente?</h2>
    <p class="email">
      <label for="email">Su correo electrónico</label>
      <input id="email" name="email" type="text" placeholder="Su correo electrónico" />
    </p>
    <p class="password">
      <label for="password">Su contraseña</label>
      <input id="password" name="password" type="text" placeholder="Su contraseña" />
    </p>
    <p class="button">
      <input type="submit" value="Entrar" />
    </p>
  </form>
</div>

Таким образом, JQuery у меня есть для этого

$(document).ready(function() {
  $('.layer').hide();
  $('.login form').hide();
  $('.login a').click(function(){
    $('.login form').toggle();
    $('.layer').toggle();
    $(".login form input:text").first().focus();
  });
  $(".login form input").focusout(function() {
    $('.login form').hide();
    $('.layer').hide();
  });
});

но как только я перехожу с адреса электронной почты на пароль, он скрывает все, так что.focusout не работает

Я пробовал $('body'). Click(function() {вместо.focusout, но это нарушает другие jquery:-/

Есть идеи?

Answer 1

Использование: не в селекторе

$(":not(.login form input)").click(function() {
    $('.login form').hide();
    $('.layer').hide();
});