Jquery ссылка перезагружается страница

Question

я работаю на этой странице:

http://sociedadmicologicasegoviana.com/

Когда «Inicia Sesion» кнопка topbar нажата, появляется скрытый DIV, но если вы хотите, чтобы закрыть с изображением, он перезагружает страницу. Кто-нибудь знает, почему?

Следующий код:

HTML:

<div id="login"> 

<div class="row" id="login-dialog-close"> 
    <div class="col-xs-12"> 
     <a href="" id="login-dialog-button-close"><span class="glyphicon glyphicon-remove"></span></a> 
    </div> 
</div> 

<div class="row login-div"> 
     <div class="col-xs-10 col-xs-offset-1 col-lg-4 col-lg-offset-4 col-md-6 col-md-offset-3 col-sm-6 col-sm-offset-3"> 
      <?php echo do_shortcode("[swpm_login_form]"); ?> 
     </div> 
</div> 

Jquery:

jQuery(document).ready(function($){ 

$("#login").hide(); 

$("#login-button").click(function(){ 
    $("#login").show(500); 
}); 

$("#login-dialog-button-close").click(function(){ 
    $("#login").hide(500); 
}); 

});

I'm не в состоянии понять это поведение причины подмигнула не кнопку, только промежуток ..

С наилучшими пожеланиями!

Answer 1

Пролет находится внутри элемента якоря с атрибутом href, установленным в "" - это относится к текущему сайту, и будет эффективно перезагрузить страницу при нажатии.

Вы действительно должны избегать использования якорей, если на самом деле не ссылаетесь на другую веб-страницу. Вместо этого вы должны изменить его на div (вы можете создать его, чтобы показать указатель с cursor: pointer;).

Однако, если вы действительно хотите использовать якорь, вы можете изменить атрибут href так:

И убедитесь, что ваш Javascript возвращает ложь:

$("#login-dialog-button-close").click(function(){ 
    $("#login").hide(500); 
    return false; 
}); 

Answer 2

С #login-dialog-button-close есть ссылка, щелкнув по ней, следуя ссылке. Вы можете предотвратить это несколькими способами:

• Изменение href="" к href="#" или href="javascript:void(0)".

• Звонок event.preventDefault() в обработчике.

  $("#login-dialog-button-close").click(function(e) { 
      e.preventDefault(); 
      $("#login").hide(500); 
  }); 
  

Answer 3

Заменить:

<a href="" id="login-dialog-button-close"> 
    <span class="glyphicon glyphicon-remove"></span> 
</a> 

С этим

<a href="javascript:void(0);" id="login-dialog-button-close"> 
    <span class="glyphicon glyphicon-remove"></span> 
</a> 

проблема в том, что атрибут link href пуст. Использование javascript: void(0); или # в href решит проблему.