Вопрос по jquery, click, ajax, scroll, anchor – jquery нажмите на элемент привязки заставляет прокрутить вверх?

18

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

I am running in to a problem using jquery and a click event attached to an anchor element. [1]: jQuery гиперссылки - значение href? & Quot; Это & Quot; Таким образом, вопрос кажется дублирующим, и принятый ответ, похоже, не решает проблему. Извините, если это плохой ТАК этикет.

В моей функции .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. Это все еще прокручивается к вершине.

Можно ли увидеть реальную страницу? Я могу привести пример того, как это работает, через 2 минуты, но я не уверен, поможет ли это вам очень сильно - вы пробовали это? Удаление окружающих факторов, пока это не работает? Paolo Bergantino

Ваш Ответ

8   ответов
2
$("#id_of_anchor").click(function(event) { 
  // ...
  return false;
}
5

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

3

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

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

1. Prevent the default behavior of the element (The A HREF="#", in your case):

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

2. Stop the event from propagating to event handlers on the surrounding HTML elements:

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

Поскольку вы не получаете ожидаемого поведения, вам следует временно прекратить вызов ajax, заменить его каким-нибудь безобидным кодом, таким как установка значения формы, или -shudder-alert("OK") и проверьте, прокручиваете ли вы до сих пор.

0

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

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

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

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

0

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

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

18

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

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

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

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

EDIT

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

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

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

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

Ага! если вы используете return false, вы не можете иметь параметр события. Итак, у меня это работает, но я все еще хотел бы знать, почему event.preventDefault () не работает. Dan.StackOverflow
параметр события не должен быть проблемой, посмотрите на пример страницы, которую я только что поднял. У меня нормально работает на ff, ie6, ie7
Я добавил больше деталей в свой вопрос и абсолютно не сомневаюсь, что я делаю что-то не так, какой еще код вы хотели бы видеть? Dan.StackOverflow
Я использовал event.preventDefault () безуспешно, после добавления return false; он работает отлично.
1

просто потерять

href="#"

В теге html ... это то, что заставляет веб-страницу "подпрыгивать".

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

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

cursor: pointer;

на ваш css, чтобы он выглядел как ссылка при наведении курсора мыши.

Удачи.

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

Похожие вопросы