jquery нажмите на элемент якорных элементов, прокрутите вверх?

Question

jQuery hyperlinks - href value? текст] [1]

У меня возникла проблема с использованием jquery и события click, привязанного к элементу привязки. [1]: jQuery hyperlinks - href value? «Этот« СО-вопрос »кажется дублирующим, и принятый ответ, похоже, не решает проблему. Извините, если это плохой этический этикет.

В моей функции .ready() у меня есть:

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

и мой якорь выглядит следующим образом:

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

но при щелчке на ссылке, функция Аякса выполняется по желанию, но браузер прокручивается в верхней части страницы. нехорошо.

Я попытался добавить:

event.preventDefault(); 

перед вызовом моей функции, которая делает Аякса, но это не помогает. Что мне не хватает?

Разъяснение

Я использовал все комбинации

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

до и после моего звонка в моем JS Аяксе функции. Он все еще прокручивается вверх.

Answer 1

Это должно работать, можете ли вы пояснить, что вы подразумеваете под «до»? Вы это делаете?

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

Потому что должен работать в том смысле, что, если он не работает, то вы делаете что-то не так, и мы должны были бы увидеть больше кода. Однако, для полноты картины, вы можете попробовать это:

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

EDIT

Here is an example of this working.

Две ссылки использовать этот код:

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

И как вы можете видеть, что они работают нормально.

Answer 2

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

Answer 3

Этот вопрос является скорее упражнением для отладки, поскольку указано, что вы используете правильные функции из jQuery Event object.

В обработчик событий JQuery, вы можете сделать что-либо, или оба из двух основных вещей:

1. поведение по умолчанию элемента (The A HREF = "#", в вашем случае) :

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

2. Остановить событие из распространяющихся обработчиков событий на окружающей HTML элементах:

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

Поскольку вы не получаете ожидаемое поведение, вы должны вынуть вызов Ajax временно заменить его каким-то безобидный код, как установив значение формы или -shudder- alert («ОК») и проверьте, все ли вы прокручиваете вверх.

Answer 4

Вы можете использовать javascript: void (0); в собственности href.

Answer 5

У меня была такая же проблема.

Я думаю, что это происходит, когда вы связываете событие перед добавлением элемента в DOM.

Answer 6

Как указано выше Tilal:

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

держит якорь тег смотрит вправо, позволяет назначать обработчики кликов к нему с JavaScript, и не прокручивается. Мы используем его широко только по этой причине.

Answer 7

Это очень помогло мне с приведенным ниже кодом. Спасибо!

 $(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

просто теряют

href="#" 

в а тег HTML ... это то, что вызывает веб-страницу «подпрыгнуть».

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

и не забудьте добавить

cursor: pointer; 

в CSS вашей страны А так он будет выглядеть ссылка при наведении курсора мыши.

Удачи.