JQuery щелчок по силам элемента привязки прокручивается вверх?

гиперссылки jQuery - значение href? текст] [1]

Я столкнулся с проблемой использования jquery и события click, привязанного к элементу привязки. [1]: гиперссылки jQuery - значение href? "This" Вопрос SO кажется дублирующим, и принятый ответ, похоже, не решает проблему. Извините, если это плохой этический этикет.

В моей функции .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>

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

Я пробовал добавить:

event.preventDefault();

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

Осветление

Я использовал каждую комбинацию

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

до и после моего вызова функции js ajax. Он по-прежнему прокручивается вверх.

Ответы

Ответ 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;
});

ИЗМЕНИТЬ

Вот пример этой работы.

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

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

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

Ответ 2

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

Ответ 3

Как сказал Тилал выше:

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

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

Ответ 4

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

В обработчике событий jQuery вы можете выполнить либо одну, либо обе из двух основных функций:

1. Предотвратите поведение элемента по умолчанию (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 ( "OK" ) и проверить, все ли вы прокручиваете вверху.

Ответ 5

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

Ответ 6

просто потеряйте

href="#"

В теге html... что заставляет веб-страницу "вскакивать".

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

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

cursor: pointer;

для вашего css, чтобы он выглядел как ссылка на mouseover.

Удачи.

Ответ 7

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

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

Ответ 8

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

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