jquery cliquez sur l'élément d'ancrage force le défilement vers le haut ?

Question

Liens hypertextes jQuery - valeur href ? texte 1]

Je rencontre un problème avec jquery et un événement de clic attaché à un élément d'ancrage.[1]: Liens hypertextes jQuery - valeur href ? "Cette" question SO semble être un doublon et la réponse acceptée ne semble pas résoudre le problème.Désolé si c'est une mauvaise étiquette.

Dans ma fonction .ready() j'ai :

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

et mon ancre ressemble à ceci :

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

mais lorsque l'on clique sur le lien, la fonction ajax est exécutée comme souhaité, mais le navigateur défile vers le haut de la page.pas bon.

J'ai essayé d'ajouter :

event.preventDefault(); 

avant d'appeler ma fonction qui fait l'ajax, mais ça n'aide pas.Qu'est-ce que je rate?

Clarification

J'ai utilisé toutes les combinaisons de

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

avant et après mon appel à ma fonction js ajax.Il défile toujours vers le haut.

Answer 1

Cela devrait fonctionner, pouvez-vous préciser ce que vous entendez par « avant »? Est-ce que vous faites cela?

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

Parce que devrait fonctionner dans le sens que si cela ne fonctionne pas que vous faites quelque chose de mal et nous avions besoin de voir plus de code. Cependant, par souci d'exhaustivité, vous pouvez également essayer ceci:

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

EDIT

Voici un exemple de ce travail .

Les deux liens utilisent ce code:

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

Et comme vous pouvez le voir, ils travaillent très bien.

Answer 2

vous pouvez utiliser javascript: void (0); dans la propriété href.

Answer 3

Tilal dit ci-dessus:

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

maintient la balise d'ancrage regardant à droite, vous permet d'assigner des gestionnaires de cliquer pour avec javascript, et ne défile pas. Nous utilisons intensivement juste pour cette raison.

Answer 4

Cette question est davantage un exercice de débogage puisqu'il est indiqué que vous utilisez les fonctions correctes du Objet événement jQuery.

Dans un gestionnaire d'événements jQuery, vous pouvez effectuer l'une ou les deux opérations de base :

1.Empêchez le comportement par défaut de l'élément (Le A HREF="#", dans votre cas) :

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

2.Empêchez l'événement de se propager aux gestionnaires d'événements sur les éléments HTML environnants :

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

Puisque vous n'obtenez pas le comportement attendu, vous devez supprimer temporairement l'appel ajax, le remplacer par un code inoffensif comme définir une valeur de formulaire, ou -frémir- alerte("OK") et testez si vous faites toujours défiler vers le haut.

Answer 5

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

Answer 6

juste perdre la balise

href="#"

Dans la balise html ... qui est ce qui provoque la page Web pour « sauter ».

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

et rappelez-vous d'ajouter

cursor: pointer;

à la css de votre une sorte qu'il ressemble à un lien sur mouseover.

Bonne chance.

Answer 7

J'ai eu le même problème.

Je pense qu'il se produit lorsque vous liez l'événement avant d'ajouter l'élément au DOM.

Answer 8

Il m'a beaucoup aidé avec le code ci-dessous. Merci!

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