jquery fai clic sulle forze dell'elemento di ancoraggio scorri verso l'alto?

Question

Collegamenti ipertestuali jQuery: valore href? Testo 1]

Sto riscontrando un problema utilizzando jquery e un evento clic allegato a un elemento di ancoraggio.[1]: Collegamenti ipertestuali jQuery: valore href? "Questa" domanda SO sembra essere un duplicato e la risposta accettata non sembra risolvere il problema.Scusa se questa è una cattiva etichetta SO.

Nella mia funzione .ready() ho:

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

e la mia ancora è simile a questa:

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

ma quando si fa clic sul collegamento, la funzione ajax viene eseguita come desiderato, ma il browser scorre fino alla parte superiore della pagina.non bene.

Ho provato ad aggiungere:

event.preventDefault(); 

prima di chiamare la mia funzione che fa l'ajax, ma questo non aiuta.Cosa mi manca?

Una precisazione

Ho usato ogni combinazione di

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

prima e dopo la mia chiamata alla mia funzione js ajax.Scorre ancora verso l'alto.

Answer 1

Che dovrebbe funzionare, si può chiarire che cosa si intende per "prima"? Stai facendo questo?

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

A causa che dovrebbe il lavoro, nel senso che se non funziona si sta facendo qualcosa di sbagliato e avremmo bisogno di vedere più codice. Tuttavia, per ragioni di completezza, si potrebbe anche provare questo:

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

Modifica

Ecco un esempio di questo lavorare.

I due collegamenti utilizzare questo codice:

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

E come si può vedere che stanno lavorando bene.

Answer 2

è possibile utilizzare javascript: void (0); in proprietà href.

Answer 3

Come detto sopra Tilal:

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

mantiene il tag di ancoraggio guardando a destra, permette di assegnare i gestori click ad esso con javascript, e non scorre. L'usiamo ampiamente proprio per questo motivo.

Answer 4

Questa domanda è più un esercizio di debug poiché si afferma che stai utilizzando le funzioni corrette da Oggetto evento jQuery.

In un gestore eventi jQuery, puoi fare una o entrambe le cose fondamentali:

1.Impedisci il comportamento predefinito dell'elemento (The A HREF="#", nel tuo caso):

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

2.Arresta la propagazione dell'evento ai gestori eventi sugli elementi HTML circostanti:

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

Dato che non ottieni il comportamento previsto, dovresti eliminare temporaneamente la chiamata ajax, sostituirla con un codice innocuo come l'impostazione di un valore del modulo o -shudder- avviso ("OK") e prova se scorri ancora verso l'alto.

Answer 5

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

Answer 6

solo perdere il

href="#"

In un tag html ... questo è quello che causa la pagina web a "saltare".

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

e ricordarsi di aggiungere

cursor: pointer;

per css del vostro un modo che sarà simile a un link al passaggio del mouse.

In bocca al lupo.

Answer 7

Ho avuto lo stesso problema.

Credo che si verifica quando si associa l'evento prima di aggiungere l'elemento al DOM.

Answer 8

Mi ha aiutato molto con il codice qui sotto. Grazie!

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