jquery haga clic en el elemento de anclaje fuerzas de desplazamiento hacia arriba?

jQuery hipervínculos – href valor? Texto 1]

Me estoy topando con un problema usando jquery y un evento de clic adjunto a un elemento de anclaje. [1]: hipervínculos jQuery – valor href? “Esta” pregunta SO parece ser un duplicado, y la respuesta aceptada no parece resolver el problema. Lo siento si esto es tan mala etiqueta.

En mi función .ready () tengo:

jQuery("#id_of_anchor").click(function(event) { //start function when any update link is clicked Function_that_does_ajax(); }); 

y mi ancla se parece a esto:

  link text  

pero cuando se hace clic en el enlace, la función ajax se realiza como se desea, pero el navegador se desplaza a la parte superior de la página. no está bien.

He intentado añadir:

 event.preventDefault(); 

Antes de llamar a mi función que hace el ajax, pero eso no ayuda. ¿Qué me estoy perdiendo?

Aclaración

He usado todas las combinaciones de

 return false; event.preventDefault(); event.stopPropagation(); 

Antes y después de mi llamada a mi función js ajax. Todavía se desplaza hasta la parte superior.

Eso debería funcionar, ¿puedes aclarar qué quieres decir con “antes”? ¿Estás haciendo esto?

 jQuery("#id_of_anchor").click(function(event) { event.preventDefault(); Function_that_does_ajax(); }); 

Porque eso debería funcionar en el sentido de que si no funciona, USTED está haciendo algo mal y necesitaríamos ver más código. Sin embargo, en aras de la integridad, también puede intentar esto:

 jQuery("#id_of_anchor").click(function() { Function_that_does_ajax(); return false; }); 

EDITAR

Aquí hay un ejemplo de este trabajo .

Los dos enlaces utilizan este código:

 $('#test').click(function(event) { event.preventDefault(); $(this).html('and I didnt scroll to the top!'); }); $('#test2').click(function(event) { $(this).html('and I didnt scroll to the top!'); return false; }); 

Y como pueden ver, están funcionando bien.

puedes usar javascript: void (0); En propiedad href.

Como dijo Tilal arriba:

  

mantiene la etiqueta de anclaje con el aspecto correcto, le permite asignar manejadores de clics con javascript y no se desplaza. Lo usamos ampliamente solo por esta razón.

Esta pregunta es más un ejercicio de depuración ya que se afirma que está utilizando las funciones correctas del objeto Evento jQuery .

En un controlador de eventos jQuery, puede hacer una o dos cosas básicas:

1. Evite el comportamiento predeterminado del elemento (The A HREF = “#”, en su caso):

 jQuery("#id_of_anchor").click(function(evt) { // ... evt.preventDefault(); // assuming your handler has "evt" as the first parameter return false; } 

2. Impida que el evento se propague a los controladores de eventos en los elementos HTML que lo rodean:

 jQuery("#id_of_anchor").click(function(evt) { // ... evt.stopPropagation(); // assuming your handler has "evt" as the first parameter } 

Dado que no está obteniendo el comportamiento esperado, debe eliminar la llamada ajax temporalmente, reemplazarla con un código inocuo, como establecer un valor de formulario o -shudder- alert (“OK”) y comprobar si aún se desplaza hacia la parte superior .

 $("#id_of_anchor").click(function(event) { // ... return false; } 

acaba de perder el

 href="#" 

En la etiqueta html … eso es lo que hace que la página web “salte”.

  link text  

y recuerda agregar

 cursor: pointer; 

a css de tu a para que se vea como un enlace en mouseover.

Buena suerte.

He estado teniendo el mismo problema.

Creo que ocurre cuando se vincula el evento antes de agregar el elemento al DOM.

Me ayudó mucho con el siguiente código. ¡Gracias!

  $(document).ready(function() { $(".dropdown dt a").click(function(event) { event.preventDefault(); $(".dropdown dd ul").toggle('slow'); }); $(".dropdown dd ul li a").click(function(event) { event.preventDefault(); $(".dropdown dd ul").hide(); }); });