2011-02-24 3 views
4

У меня есть 2 ссылки, которые скрывают настоящую информацию от пользователей на главной странице. При нажатии одной ссылки на экране появляется новая информация. Проблема в том, что когда я нажимаю на любую из ссылок, окно возвращается в начало страницы. Я бы хотел предотвратить это поведение, поскольку это раздражает.JQuery: Предотвращение прокрутки окна после нажатия ссылки

Вот код для ссылок

<div align="right" id="ajaxIncomingMail"><a href="#" class="incomingMail">Incoming Mail</a></div><div id="ajaxOutgoingMail"><h5><a href="#" class="outgoingMail">Outgoing Mail</a></h5></div> 

и вот код JQuery:

 $(function(){ 
     $("a.incomingMail").click(function(e){ 
      e.preventDefault(); 
      $("#ajaxMailShowContentOutbox").hide(); 
      $("#ajaxMailShowContentInbox").fadeIn("slow"); 
     }); 

     $("a.outgoingMail").click(function(e){ 
      e.preventDefault(); 
      $("#ajaxMailShowContentInbox").hide(); 
      $("#ajaxMailShowContentOutbox").fadeIn("slow"); 
     }); 
     return false; 
    }); 

Здесь я использую preventDefault(), и это все еще не работает !? Я также попытался вернуть false, но это тоже не сработало. Я не знаю, имеет ли это значение, но информация, которая представлена, вытягивается с php из db. Как я могу сделать прокрутку, когда я нажимаю ссылку?

+0

e.preventDefault() должен это сделать. Прокрутка страницы вверху или ее прокрутка из-за изменения содержимого на странице? – partkyle

+0

Я согласен с Кевином Герни - он, вероятно, должен использовать .live(), если ссылки фактически добавляются на страницу после загрузки DOM и javascript уже выполнен. – Pandincus

+0

partkyle, прокрутка происходит из-за изменения содержимого на странице. И нет, сами ссылки не меняются - меняется только контент, но не ссылки. – Johny

ответ

10

Должно ли return false; быть в фактическом событии кликов jQuery, а не за его пределами?

редактировать

$(function(){ 
    $("a.incomingMail").click(function(e){ 
     e.preventDefault(); 
     $("#ajaxMailShowContentOutbox").hide(); 
     $("#ajaxMailShowContentInbox").fadeIn("slow"); 
     return false; 
    }); 

    $("a.outgoingMail").click(function(e){ 
     e.preventDefault(); 
     $("#ajaxMailShowContentInbox").hide(); 
     $("#ajaxMailShowContentOutbox").fadeIn("slow"); 
     return false; 
    }); 

}); 
+0

У меня есть возвраты внутри события cilck, но я думаю, что это имеет какое-то отношение к тому, как я манипулирую своими div и классами. – Johny

+0

То, что я вижу, является ложным обращением снаружи. см. мое редактирование – griegs

+0

заботиться о том, чтобы показать мне, как? Я всегда интерпретирую вышеуказанный код как: .click (function() {// внутри события click click right; return false;}); // вне функции щелчка теперь – Johny

2

Вы можете попробовать:

$("a.incomingMail").live("click", function(e) { 
    e.preventDefault(); 
    $("#ajaxMailShowContentOutbox").hide(); 
    $("#ajaxMailShowContentInbox").fadeIn("slow"); 
}); 

и

$("a.outgoingMail").live("click", function(e) { 
    e.preventDefault(); 
    $("#ajaxMailShowContentInbox").hide(); 
    $("#ajaxMailShowContentOutbox").fadeIn("slow"); 
}); 

вместо .click, если ваша информацию в настоящее время вытащило из базы данных, так как связывание щелчка обработчика событий для вашей ссылки с. click() будет применять обработчик событий только к элементам, уже загруженным на страницу и , а не к элементам, которые загружаются позже из вашей базы данных.

+0

Все еще не работает: (Какая версия jQuery мне нужна для использования live()? – Johny

+0

http://api.jquery.com/live since 1.3 – AlfaTeK

+0

Just check: у меня есть jQuery V1.4.1, так что это не проблема. Я должен что-то делать неправильно. – Johny

2

вы можете иметь HREF = '#' в теге, изменить его HREF = '###', и это должно остановить прокрутку.

Смежные вопросы