jquery нажмите на элемент привязки заставляет прокрутить вверх?

Question

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

Я столкнулся с проблемой, используя jquery и событие click, прикрепленное к элементу привязки. [1]: jQuery гиперссылки - значение href? «Этот» ТАК вопрос кажется дубликатом, и принятый ответ, похоже, не решает проблему. Извините, если это плохой ТАК этикет.

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

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

РЕДАКТИРОВАТЬ

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

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

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

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

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

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

Answer 3

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

Answer 4

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

В обработчике событий 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") и проверьте, прокручиваете ли вы до сих пор.

Answer 5

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

Answer 6

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

href="#"

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

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

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

cursor: pointer;

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

Удачи.

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

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

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