jquery haga clic en las fuerzas del elemento de anclaje para desplazarse hacia arriba?

Question

jQuery hyperlinks - href value? texto] [1]

Estoy corriendo hacia un problema al usar jquery y un evento de clic asociado a un elemento de anclaje. [1]: jQuery hyperlinks - href value? "Esta" pregunta SO parece ser un duplicado, y la respuesta aceptada no parece resolver el problema. Lo siento si esto es malo SO etiqueta.

En mi función ready() que tienen:

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:

<a href="#" id="id_of_anchor"> link text </a> 

pero cuando se hace clic en el enlace, se lleva a cabo la función ajax como se desee, 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 mis js función ajax. Todavía se desplaza a la cima.

Answer 1

Eso debería funcionar, ¿puede aclarar lo que quiere decir con "antes"? ¿Estás haciendo esto?

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

Debido a que debe trabajo en el sentido de que si no funciona que está haciendo algo mal y que había necesidad de ver más código. Sin embargo, en aras de la exhaustividad, se podría también intentar esto:

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

EDITAR

Here is an example of this working.

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 se puede ver que están trabajando muy bien.

Answer 2

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

Answer 3

Esta pregunta es más un ejercicio de depuración ya que se indica que está utilizando las funciones correctas del jQuery Event object.

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

1. Prevenir 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. Detener el caso de que se propaguen a los controladores de eventos en los elementos HTML que rodean:

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

Puesto que usted no está recibiendo el comportamiento esperado, se debe sacar la llamada AJAX temporalmente, reemplazarlo con algo de código inocuo como el establecimiento de una form value, o -shder-alerta ("OK") y prueba si todavía se desplaza hacia la parte superior.

Answer 4

puede usar javascript: void (0); en la propiedad href.

Answer 5

He estado teniendo el mismo problema.

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

Answer 6

Como se dijo anteriormente Tilal:

<a id="id_of_anchor" href="javascript:void(0)" /> 

mantiene la etiqueta de anclaje mirando a la derecha, le permite asignar clic manipuladores a ella con javascript y no se desplaza. Lo usamos ampliamente solo por esta razón.

Answer 7

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(); 
     }); 
    }); 

Answer 8

simplemente pierden la

href="#" 

En la etiqueta html ... eso es lo que causa la página web para "saltar".

<a id="id_of_anchor"> link text </a> 

y recuerde agregar

cursor: pointer; 

a CSS de su una por lo que se verá como un enlace en mouseover.

Buena suerte.