jquery hace clic en el elemento de anclaje para desplazarse hacia arriba?

Question

Hipervínculos jQuery: ¿valor href? texto 1]

Me encuentro con un problema al usar jquery y un evento de clic adjunto a un elemento de anclaje.[1]: Hipervínculos jQuery: ¿valor href? "Esta" pregunta SO parece estar duplicada y la respuesta aceptada no parece resolver el problema.Lo siento si esto es una 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 ve así:

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

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

Intenté agregar:

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 cima.

Answer 1

Eso debería funcionar, se puede aclarar lo que quiere decir con "antes"? Qué haces 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

Aquí es un ejemplo de este de 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 se puede ver que están trabajando muy bien.

Answer 2

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

Answer 3

Como dijo Tilal arriba:

<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. La usamos extensivamente sólo por esta razón.

Answer 4

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

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

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.Evite que el evento se propague a los controladores de eventos en los elementos HTML circundantes:

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 algún código inofensivo como establecer un valor de formulario, o -estremecerse- alerta ("OK") y prueba si aún te desplazas hacia la parte superior.

Answer 5

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

Answer 6

acaba de perder el

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;

para css de su una por lo que se verá como un enlace en mouseover.

Buena suerte.

Answer 7

He tenido el mismo problema.

Creo que se produce cuando se enlaza el evento antes de añadir el elemento a la DOM.

Answer 8

Me ayudó mucho con el código de abajo. 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();
        });
    });