0
2つのHTMLページを含むjQueryモバイルアプリケーションを作成しています。ユーザーがindex.htmlページからsearch.htmlページにナビゲートすると、jQueryは要素をsearch.htmlページにロードする必要があります。jQueryモバイルはページ間のページショーコードを起動しません
しかし、状況が間違っているようです。スクリプトが期待どおりに動作しません。
index.htmlを
<!DOCTYPE html>
<head>
<!-- Include meta tag to ensure proper rendering and touch zooming -->
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta charset="utf-8">
<!-- Include jQuery Mobile stylesheets -->
<link rel="stylesheet" href="css/jquery.mobile-1.4.5.min.css" ></link>
<link rel="stylesheet" href="css/mahidol.min.css"></link>
<link rel="stylesheet" href="css/themes/jquery.mobile.icons.min.css"></link>
<!-- Include the jQuery library -->
<script src="js/jquery-1.11.3.min.js"></script>
<!-- Include the jQuery Mobile library -->
<script src="js/jquery.mobile-1.4.5.min.js"></script>
<!-- Cordova sh*ts -->
<script type="text/javascript" src="cordova.js"></script>
<script src="js/parameterHandler.js"></script>
<script src="js/default.js"></script>
</head>
<body>
<div data-role="page" id="index">
<div data-role="header" data-position="fixed">
<a href="prefs.html" class="ui-btn ui-shadow ui-corner-all ui-btn-icon-left ui-icon-gear">Preferences</a>
<h1><img src="logo.png" height="15px"> Contact</h1>
</div>
<div data-role="main" class="ui-content">
<form class="ui-filterable">
<a href="search.html" class="ui-btn" data-transition="flip">Search from name</a>
<input id="filterBoxList" data-type="search" placeholder="Type here to search from department list">
</form>
<ul data-role="listview" data-filter="true" data-input="#filterBoxList" id="list_dept">
</ul>
</div>
</div>
</body>
search.htmlの
<!DOCTYPE html>
<head>
<!-- Include meta tag to ensure proper rendering and touch zooming -->
<meta name="viewport" content="width=device-width, initial-scale=1"></meta>
<meta charset="utf-8"></meta>
<!-- Include jQuery Mobile stylesheets -->
<link rel="stylesheet" href="css/jquery.mobile-1.4.5.min.css" ></link>
<link rel="stylesheet" href="css/mahidol.min.css"></link>
<link rel="stylesheet" href="css/themes/jquery.mobile.icons.min.css"></link>
<!-- Include the jQuery library -->
<script src="js/jquery-1.11.3.min.js"></script>
<!-- Include the jQuery Mobile library -->
<script src="js/jquery.mobile-1.4.5.min.js"></script>
<!-- Cordova shits -->
<script type="text/javascript" src="cordova.js"></script>
<script src="js/parameterHandler.js"></script>
<script src="js/default.js"></script>
<style>
#listie small{
color: #ccc !important;
}
</style>
</head>
<body>
<div data-role="page" id="search">
<div data-role="header" data-position="fixed">
<a href="prefs.html" class="ui-btn ui-shadow ui-corner-all ui-btn-icon-left ui-icon-gear">Preferences</a>
<h1><img src="logo.png" height="15px"> Contact</h1>
</div>
<div data-role="main" class="ui-content">
<form class="ui-filterable">
<a href="#index" class="ui-btn" data-transition="flip">Search from dept. list</a>
<input id="filterBoxName" data-type="search" placeholder="Type here to search from name">
</form>
<ul data-role="listview" data-filter="true" data-input="#filterBoxName" id="listie">
</ul>
</div>
</div>
</body>
にDefault.jsは
$(document).on("pageshow","search.html",function(){
var chx = 0;
var m="";
var k=[];
$.mobile.loading("show", {
text: 'Loading',
textVisible: true
});
if(loaded == false) // This will prevent event triggering more then once
{
for (var t in JSON.parse(localStorage.getItem('hr')))
{
m += "<li><a href='#view?id=" + t + "'>" + JSON.parse(localStorage.getItem('hr'))[t].Name + " <small>" + JSON.parse(localStorage.getItem('hr'))[t].Surname + "</small></a></li>";
}
$('#listie').append(m).listview('refresh');
loaded = true;
}
$.mobile.loading("hide");
});
物事は "検索" する場合の素敵なように思わページ（最後にロードされました） divはindex.htmlの内側に配置されています（コードは2つではなく1つのページにリンクされています）。しかし、私はファイルを2つのファイルに分割しようとしたときに壊れます。
私はこれを修正するために何かできますか？