jquery clic su elemento di ancoraggio forza scorrere verso l'alto?

Question

jQuery hyperlinks - href value? text] [1]

Sono in esecuzione su un problema utilizzando jquery e un evento click collegato a un elemento di ancoraggio. [1]: jQuery hyperlinks - href value? "Questa" domanda SO sembra essere un duplicato e la risposta accettata non sembra risolvere il problema. Scusate se questo è male, così l'etichetta.

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 assomiglia a questo:

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

ma quando il link viene cliccato, viene eseguita la funzione ajax, se lo desideri, ma il browser scorre in cima alla pagina. non bene.

Ho provato ad aggiungere:

event.preventDefault(); 

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

Chiarimento

Ho usato ogni combinazione di

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

prima e dopo la mia chiamata ai miei js funzione ajax. Continua a scorrere verso l'alto.

Answer 1

Che dovrebbe funzionare, puoi chiarire cosa intendi per "prima"? Stai facendo questo?

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

Perché dovrebbe 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; 
}); 

EDIT

Here is an example of this working.

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

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

Answer 3

Questa domanda è più di un esercizio di debug poiché si afferma che si stanno utilizzando le funzioni corrette da jQuery Event object.

In un gestore di eventi jQuery, è possibile eseguire una o entrambi, di due cose fondamentali:

1. Impedire il comportamento predefinito dell'elemento (L'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. di fermare la manifestazione si propaghino ai gestori di eventi sugli elementi HTML circostanti:

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

Dal momento che non stai ricevendo il comportamento previsto, si dovrebbe prendere la chiamata ajax temporaneamente, sostituirlo con un codice innocuo come l'impostazione di un valore modulo, o -shudder- avviso ("OK") e verificare se si continua a scorrere verso l'alto.

Answer 4

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

Answer 5

Ho avuto lo stesso problema.

Penso che si verifichi quando si associa l'evento prima di aggiungere l'elemento al DOM.

Answer 6

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. Lo usiamo ampiamente solo per questo motivo.

Answer 7

Mi ha aiutato molto con il codice seguente. 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(); 
     }); 
    }); 

Answer 8

solo perdere il

href="#" 

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

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

e ricordarsi di aggiungere

cursor: pointer; 

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

Buona fortuna.