2013-02-23 5 views
0

Я сейчас строю страницу с мобильным телефоном jQuery. Мне нужно загрузить некоторый JavaScript custon на одной странице, поэтому я нашел функцию pageInit. Вот краткий пример того, что я использую:jQuery mobile «pageinit» вызывает хэштаг на короткое время

page1.html:

<!doctype html> 
<meta charset="uft-8"> 
<meta name="viewport" content="width=device-width, initial-scale=1"> 
<title>page1 | test page for jquery mobile</title> 

<link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.0/jquery.mobile-1.3.0.min.css"> 

<script src="http://code.jquery.com/jquery-1.8.2.min.js"></script> 
<script src="http://code.jquery.com/mobile/1.3.0/jquery.mobile-1.3.0.min.js"></script> 
<script src="js.js"></script> 

<div data-role="page" id="page1"> 
    <div data-role="header"> 
     <h1>Page 1 Title</h1> 
    </div> 

    <div data-role="content"> 
     <a href="page2.html">go to page2</a> 
     <p>Page 1 content goes here.</p> 
    </div> 

    <div data-role="footer"> 
     <h4>Page 1 Footer</h4> 
    </div> 
</div> 

page2.html:

<!doctype html> 
<meta charset="uft-8"> 
<meta name="viewport" content="width=device-width, initial-scale=1"> 
<title>page1 | test page for jquery mobile</title> 

<link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.0/jquery.mobile-1.3.0.min.css"> 

<script src="http://code.jquery.com/jquery-1.8.2.min.js"></script> 
<script src="http://code.jquery.com/mobile/1.3.0/jquery.mobile-1.3.0.min.js"></script> 
<script src="js.js"></script> 

<div data-role="page" id="page2"> 
    <div data-role="header"> 
     <h1>Page 2 Title</h1> 
    </div> 

    <div data-role="content"> 
     <a href="page1.html">go to page1</a> 
     <p id="addstuff">Page 2 content goes here.</p> 
    </div> 

    <div data-role="footer"> 
     <h4>Page 2 Footer</h4> 
    </div> 
</div> 

js.js

$(document).delegate('#page2', 'pageinit', function() { 
    $('<div />', { 
     html: 'Some text that was added via jQuery' 
    }).appendTo('#addstuff'); 
}); 

Я необходимо выполнить некоторый JavaScript на странице2.html. Это действительно отлично работает (div был создан, и вы видите текст). Но когда я нажимаю на ссылку, чтобы изменить страницу, вы можете видеть, что jQuery сначала вызывает хэштег в URL. Так он выглядит:

example.org/page1.html#/page2.html 

, когда я нажал на ссылку на page1.html (только в течение нескольких миллисекунд, может быть), а затем он перенаправляет на

example.org/page2.html 

Я предполагаю, что это из-за ид. но мне нужен этот для страницы. (насколько я знаю). Это нормальное поведение? Или я делаю что-то неправильно. Возможно, есть даже команда не вызывать хэш-тег.

ответ

1

Здесь вы идете:

Важно отметить, что если вы связываете с мобильной страницы, которая была загружена с помощью AJAX на страницу, которая содержит несколько внутренних страниц, необходимо добавить отн = "внешний "или data-ajax =" false "в ссылку. Это сообщает платформе, чтобы выполнить полную перезагрузку страницы, чтобы очистить хэш AJAX в URL-адресе. Это важно, поскольку страницы AJAX используют хеш (#) для отслеживания истории AJAX, в то время как несколько внутренних страниц используют хеш для указания внутренних страниц, поэтому в хэше могут возникать конфликты между этими двумя режимами.

Например, ссылка на страницу, содержащую несколько внутренних страниц будет выглядеть следующим образом:

< A HREF = "multipage.html" отн = "внешний"> на нескольких страницах ссылку </а>

Src: http://view.jquerymobile.com/1.3.0/#Linkingwithinamulti-pagedocument

+0

спасибо, но на самом деле это хорошо, что страница загружается через Ajax. Я использую только id из-за pageInit для JavaScript. Но я не хочу, чтобы полная перезагрузка страницы. – foodev

+0

Я считаю, что вам понадобится # тэг в URL-адресе, а затем опытное поведение будет нормальным. «Страницы AJAX используют хэш (#) для отслеживания истории AJAX». Если вы не добавили rel = "external" или data-ajax = "false" в URL-адрес, тогда вы используете навигационную систему AJAX, используя # тега. – Red2678

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