jquery klicken auf Ankerelement Kräfte scrollen nach oben?

Question

jQuery hyperlinks - href value? Text] [1]

Ich renne zu einem Problem mit jQuery und einem Klickereignis an einem Ankerelement. [1]: jQuery hyperlinks - href value? "Diese" SO Frage scheint ein Duplikat zu sein, und die akzeptierte Antwort scheint das Problem nicht zu lösen. Entschuldigung, wenn das schlecht ist, SO Etikette.

In meinem .ready() Funktion die ich habe:

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

und mein Anker sieht wie folgt aus:

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

aber, wenn der Link angeklickt wird, wird die Ajax-Funktion wie gewünscht durchgeführt werden, aber der Browser scrollt zum oberen Rand der Seite. nicht gut.

Ich habe das Hinzufügen versucht:

event.preventDefault(); 

vor meiner Funktion aufrufen, die die Ajax tut, aber das hilft nicht. Was fehlt mir?

Klärung

Ich habe jede Kombination von

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

vor und nach meinem Aufruf an meine js Ajax-Funktion verwendet. Es scrollt immer noch nach oben.

Answer 1

Das sollte funktionieren, können Sie klären, was Sie mit "vor" meinen? Machst du das?

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

Denn die sollte Arbeit in dem Sinne, dass, wenn es funktioniert nicht, dass 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; 
}); 

EDIT

Here is an example of this working.

Die beiden Links können Sie diesen 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; 
}); 

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

Answer 2

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

Answer 3

Diese Frage ist mehr eine Debugging-Übung, da es besagt, dass Sie die richtigen Funktionen von der jQuery Event object verwenden.

In einem Ereignishandler jQuery, können Sie entweder tun oder beide von zwei grundlegende Dinge:

1. Prevent das Standardverhalten des Elements (Die A HREF = "#", in Ihrem Fall) :

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

2. Stoppen Sie das Ereignis Ausbreitung zu Event-Handler auf die umliegenden HTML-Elemente:

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

Da Sie nicht das erwartete Verhalten bekommen, sollten Sie vorübergehend die Ajax-Aufruf nehmen, ersetzen Sie es mit etwas harmlos Code wie eine Einstellung form value oder -shudder- alert ("OK") und testen Sie, ob Sie noch nach oben scrollen.

Answer 4

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

Answer 5

Ich hatte das gleiche Problem.

Ich denke, es tritt auf, wenn Sie das Ereignis vor dem Anhängen des Elements an das DOM binden.

Answer 6

Wie Tilal oben gesagt:

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

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

Answer 7

Es hat mir sehr geholfen mit dem untenstehenden 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(); 
     }); 
    }); 

Answer 8

nur die

href="#" 

In der ein HTML-Tag verlieren ... das ist, was die Web-Seite verursacht zu "springen".

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

und erinnern

cursor: pointer; 

zu Ihrem einer CSS hinzufügen, damit es wie ein Link mit der Maus darüber aussehen wird.

Viel Glück.