jQuery clique na âncora forças elemento rolar para cima?

Question

jQuery hiperlinks -? Valor href texto ] [1]

Eu estou correndo em um problema com jQuery e um evento de clique anexado a um elemento âncora. [1]: jQuery hiperlinks - valor href "Este" questão SO parece ser uma duplicata e a resposta aceita não parece resolver o problema. Desculpe se isso é má etiqueta SO.

Na minha função .ready () eu tenho:

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

e minha âncora esta aparência:

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

mas quando o link é clicado, a função de ajax é realizada como desejado, mas os pergaminhos do navegador para o topo da página. não é bom.

Eu tentei adicionar:

event.preventDefault(); 

antes de chamar a minha função que faz o ajax, mas isso não ajuda. O que eu estou ausente?

Clarificação

Eu usei todas as combinações de

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

antes e depois da minha chamada para o meu js função ajax. Ele ainda rola para o topo.

Answer 1

Isso deve funcionar, você pode esclarecer o que você quer dizer com "antes"? Você está fazendo isso?

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

Porque que deve trabalho no sentido de que se ele não está funcionando, você está fazendo algo errado e nós precisamos ver mais código. No entanto, por uma questão de exaustividade, você também pode tentar o seguinte:

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

Editar

Aqui está um exemplo desta trabalho.

Os dois links usar este código:

$('#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 como você pode ver que eles estão trabalhando muito bem.

Answer 2

Você pode usar javascript: void (0); na propriedade href.

Answer 3

Como Tilal disse acima:

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

mantém a marca de âncora olhando bem, permite manipuladores Clique em Atribuir a ele com javascript, e não rola. Vamos utilizá-lo extensivamente apenas por este motivo.

Answer 4

Esta questão é mais de um exercício de depuração, uma vez que é indicado que você está usando as funções corretas do jQuery Evento objeto .

Em um manipulador de eventos jQuery, você pode fazer qualquer um, ou ambos, de duas coisas básicas:

1. Impedir o comportamento padrão do elemento (à href = "#", no seu caso):

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

2. Parar o evento se propague para manipuladores de eventos sobre os elementos HTML circundantes:

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

Uma vez que você não está recebendo o comportamento esperado, você deve tirar a chamada ajax temporariamente, substitua-o com algum código inócuo como definir um valor de formulário, ou -shudder- alert ( "OK") e teste se você ainda rolagem para cima.

Answer 5

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

Answer 6

apenas perder o

href="#"

Na marca um html ... Isso é o que causam a página da web para "saltar para cima".

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

e lembre-se de adicionar

cursor: pointer;

para css do seu um assim ele vai olhar como um link em mouseover.

Boa sorte.

Answer 7

Eu tenho tido o mesmo problema.

Eu acho que ocorre quando você ligar o evento antes de acrescentar o elemento ao DOM.

Answer 8

Ele me ajudou muito com o código abaixo. Obrigado!

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