jQuery мобильная навигационная ссылка не работает при первом нажатии

Question

Я создаю приложение apache cordova, используя jquery mobile. У меня есть страница входа в систему, где при успешном входе страница перенаправляется на mainpage.html с помощью $ (": mobile-pagecontainer") .pagecontainer ("change", "mainpage.html"); На mainpage.html У меня есть многостраничный шаблон с использованием navabar. Код ниже: -

<!-- jQuery --> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script> 
 

 
<!-- jQuery Mobile --> 
 
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jquerymobile/1.4.5/jquery.mobile.min.css"> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquerymobile/1.4.5/jquery.mobile.min.js"></script> 
 

 
<div data-role="page" id="pageone"> 
 
    <div data-role="header"> 
 
    <h1>Welcome To My Homepage</h1> 
 
    <div data-role="navbar"> 
 
     <ul> 
 
     <li><a href="#" class="ui-btn-active" data-icon="home" rel="external" data-ajax="false">Home</a> 
 
     </li> 
 
     <li><a href="#pagetwo" data-icon="arrow-r" rel="external" data-ajax="false">Page Two</a> 
 
     </li> 
 
     </ul> 
 
    </div> 
 
    </div> 
 

 
    <div data-role="main" class="ui-content"> 
 
    <p>With the ui-btn-active class, notice that the Home button stays highlighted (selected).</p> 
 
    <p>If you click on the Page Two, you will notice that none of the buttons are highlighted (selected).</p> 
 
    </div> 
 

 
    <div data-role="footer"> 
 
    <h1>My Footer</h1> 
 
    </div> 
 
</div> 
 

 
<div data-role="page" id="pagetwo"> 
 
    <div data-role="header"> 
 
    <h1>Welcome To My Homepage</h1> 
 
    <div data-role="navbar"> 
 
     <ul> 
 
     <li><a href="#pageone" data-icon="home" rel="external" data-ajax="false">Home</a> 
 
     </li> 
 
     <li><a href="#" data-icon="arrow-r" rel="external" data-ajax="false">Page Two</a> 
 
     </li> 
 
     </ul> 
 
    </div> 
 
    </div> 
 

 
    <div data-role="main" class="ui-content"> 
 
    <p>No buttons are pre-selected (highlighted) in this page..</p> 
 
    <p>To get the selected look for each button that represents the page you are actually on, go back to our navbar tutorial and read the next step to find out how!</p> 
 
    </div> 
 

 
    <div data-role="footer"> 
 
    <h1>My Footer</h1> 
 
    </div> 
 
</div>

Проблема заключается в том, что, когда я нажимаю на страницу с вкладку Два не загружается в первый раз. При нажатии его еще раз, он загружает DIV с идентификатором страницы два

Можете ли вы помочь мне исправить проблему не загружая страницы два при первом щелчке?

Answer 1

ленивое решение:
Измените страницу с помощью чистого javascript.

location.href = "mainpage.html"; 

Сложное/грязный раствор

Я был в состоянии воспроизвести проблему.

Проблема в том, как jquery-mobile обрабатывает навигацию ajax. Если вы указали связь с page1.html по номеру page2.html. Jquery-мобиля будет выглядеть в page2.html и принимать только первый div с data-role="page" и загрузить его в page1.html

Если вы связываете с многостраничной, вы всегда получите первую страницу и больше ничего. Чтобы изменить это, вы должны добавить rel="external" к ссылке. Таким образом, инфраструктура загружает всю страницу, заголовок и все страницы.

С этими знаниями, единственное, что мы должны изменить на $(":mobile-pagecontainer").pagecontainer("change", "mainpage.html"), чтобы сказать jqm, что он должен перезагрузить страницу.
The Api doc говорит, что есть опция reload или reloadPage (устаревший). Но, к сожалению, это ничего не меняет. Я не знаю, не работает ли он, или если я не понимаю вариант права.

$(":mobile-pagecontainer").pagecontainer("change", "mainpage.html", {reloadPage : true}); 

, если добавить параметр dataUrl : "mainpage.html"pagetwo еще не загружается в DOM, но якорь pagetwo работает.
Но вы заметите беспорядок в браузерах URL-бар (start.html # mainpage.html)

$(":mobile-pagecontainer").pagecontainer("change", "mainpage.html", {reloadPage : true, dataUrl : "mainpage.html"}); 

Теперь вы можете apend другой вариант changeHash: false не изменить хэш/URL при загрузке новой страницы ,

$(":mobile-pagecontainer").pagecontainer("change", "mainpage.html", {reloadPage : true, dataUrl : "mainpage.html", changeHash: false}); 

Таким образом, вы не получите беспорядок в браузере url-bar. Но вы не можете вернуться с помощью кнопки возврата браузеров.И перезагрузка с выведет вас на предыдущую страницу.