JQuery-Klick auf Ankerelement zwingt zum Scrollen nach oben?

Question

jQuery-Hyperlinks – href-Wert? Text 1]

Ich stoße auf ein Problem bei der Verwendung von Jquery und einem an ein Ankerelement angehängten Klickereignis.[1]: jQuery-Hyperlinks – href-Wert? „Diese“ SO-Frage scheint ein Duplikat zu sein, und die akzeptierte Antwort scheint das Problem nicht zu lösen.Tut mir leid, wenn das eine schlechte SO-Etikette ist.

In meiner .ready() Funktion habe ich:

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

und mein Anker sieht so aus:

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

Wenn jedoch auf den Link geklickt wird, wird die Ajax-Funktion wie gewünscht ausgeführt, der Browser scrollt jedoch zum Seitenanfang.nicht gut.

Ich habe versucht hinzuzufügen:

event.preventDefault(); 

bevor ich meine Funktion aufrufe, die den Ajax ausführt, aber das hilft nicht.Was vermisse ich?

Klärung

Ich habe jede Kombination davon verwendet

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

vor und nach meinem Aufruf meiner js-Ajax-Funktion.Es scrollt immer noch nach oben.

Answer 1

Das sollte funktionieren, können Sie klären, was Sie mit „vor“ bedeuten? Tun Sie das?

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

Weil das sollte Arbeit in dem Sinne, dass, wenn es nicht funktioniert Sie etwas falsch machen, und wir bräuchten, um mehr Code. Jedoch aus Gründen der Vollständigkeit, können Sie auch versuchen, diese:

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

Bearbeiten

Hier ist ein Beispiel für diese Arbeit .

Die beiden Links können Sie diesen Code ein:

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

Und wie Sie sehen können, sie arbeiten gut.

Answer 2

Sie können Javascript verwenden: void (0); in href Eigenschaft.

Answer 3

Wie Tilal oben gesagt:

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

, um den Anker-Tag sucht rechts hält, können Sie klicken Handler es mit Javascript zuweisen und blättert nicht. Wir verwenden es ausgiebig nur aus diesem Grund.

Answer 4

Bei dieser Frage handelt es sich eher um eine Debugging-Übung, da angegeben wird, dass Sie die richtigen Funktionen aus dem verwenden jQuery-Ereignisobjekt.

In einem jQuery-Ereignishandler können Sie zwei grundlegende Dinge oder beides tun:

1.Verhindern Sie das Standardverhalten des Elements (in Ihrem Fall das A HREF="#):

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

2.Verhindern Sie, dass das Ereignis an Ereignishandler in den umgebenden HTML-Elementen weitergegeben wird:

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

Da Sie nicht das erwartete Verhalten erhalten, sollten Sie den Ajax-Aufruf vorübergehend entfernen und ihn durch harmlosen Code wie das Festlegen eines Formularwerts oder -shudder- ersetzen. alarm("OK") und testen Sie, ob Sie immer noch nach oben scrollen.

Answer 5

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

Answer 6

verlieren nur die

href="#"

In dem einem HTML-Tag ... das ist, was die Web-Seite verursacht zu "springen".

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

und denken Sie daran hinzuzufügen

cursor: pointer;

zu css Ihr eine ist so wird es wie ein Link mit der Maus darüber aussehen.

Viel Glück.

Answer 7

Ich habe das gleiche Problem gehabt.

Ich denke, es tritt auf, wenn Sie das Ereignis binden, bevor das Element an den DOM angehängt wird.

Answer 8

Es hat mir sehr geholfen mit dem folgenden Code. Vielen Dank!

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