我使用phonegap，jquery，jquery mobile min和自定义页面滑动代码构建应用程序。它基本上是一个主菜单，导航到十个子菜单，再导航到大约200个静态HTML页面。
我将所有内容合并到一个单独的页面中，以便在每次页面更改时不必重新加载脚本。这起初很有效，但当我继续添加内容后，在页面的某个特定点之后，没有任何链接有效，点击时没有反应。
我相信这不是与那些链接的HTML有关的问题，该点之后的每个链接都失败了。如果我将链接的剪切/粘贴到文档的开头，它就可以正常工作，但它原来位置之后的下一个链接就不再起作用了。
在停止的那一点，页面大小约为250kb，有3500行代码。
我通过创建10个单独的页面来临时修复了它，每个菜单都有一个页面，这确实可以工作，但会引入自己的问题，如果可能的话，我想避免这些问题。
Phonegap，jquery或jquery mobile min是否对单个页面的大小有限制，超过一定大小会忽略其余代码？是否有什么方法可以解决这个问题？
这是我正在使用的自定义滚动脚本：
我将所有内容合并到一个单独的页面中，以便在每次页面更改时不必重新加载脚本。这起初很有效，但当我继续添加内容后，在页面的某个特定点之后，没有任何链接有效，点击时没有反应。
我相信这不是与那些链接的HTML有关的问题，该点之后的每个链接都失败了。如果我将链接的剪切/粘贴到文档的开头，它就可以正常工作，但它原来位置之后的下一个链接就不再起作用了。
在停止的那一点，页面大小约为250kb，有3500行代码。
我通过创建10个单独的页面来临时修复了它，每个菜单都有一个页面，这确实可以工作，但会引入自己的问题，如果可能的话，我想避免这些问题。
Phonegap，jquery或jquery mobile min是否对单个页面的大小有限制，超过一定大小会忽略其余代码？是否有什么方法可以解决这个问题？
这是我正在使用的自定义滚动脚本：
function navnext( next ) {
$( ":mobile-pagecontainer" ).pagecontainer( "change", next, {
transition: "none"
});
}
function navprev( prev ) {
$( ":mobile-pagecontainer" ).pagecontainer( "change", prev, {
transition: "none",
reverse: true
});
}
$( document ).one( "pagecreate", "#page1", function() {
// Handler for navigating to the next page
// Navigate to the next page on swipeleft
$( document ).on( "swipeleft", ".ui-page", function( event ) {
// Get the filename of the next page. We stored that in the data-next
// attribute in the original markup.
var next = $( this ).jqmData( "next" );
if ( next ) {
navnext( next );
}
});
// The same for the navigating to the previous page
$( document ).on( "swiperight", ".ui-page", function( event ) {
var prev = $( this ).jqmData( "prev" );
if (prev) {
navprev( prev );
}
});
});
这是HTML代码的样子：
<i></i><!DOCTYPE HTML>
<html>
<head>
<script src="js/jquery.js"></script>
<script src="js/jquery.mobile.min.js"></script>
<script src="js/jqueryswipegrey.js"></script>
<link rel="stylesheet" href="css/deck.css"></link>
</head>
<body>
<div class="title"><h1> App Title</h1><a href="#page1"><img class="home" src="img/home.png"></a></div>
<!-- -------------------------------MAIN MENU-------------------------------------------------------------------------------------------------- -->
<div id="page1" data-role="page" data-prev="#page1" data-next="#pagesub1"><div class="wrapper"><ul data-role="listview" data-inset="true"><h2>
Main Menu
</h2></ul> <div data-role="content">
<font size="4">
<p class="line"><img src="img/redline.png" width="100% of window";></p>
<p class="menu"> <a class="link" href="#pagesub1"><img class="smallcardplot" src="img/01001.jpg"> Link to First Submenu</a></p>
<p class="line"><img src="img/redline.png" width="100% of window";></p>
然后：
<div id="pageplot" data-role="page" data-prev="#page1" data-next="#pagesubmenu2"><div class="wrapper"><ul data-role="listview" data-inset="true"><h2>
1st Submenu
</h2></ul> <div data-role="content">
<font size="4">
<p class="line"><img src="img/redline.png" width="100% of window";></p>
<p class="menu"> <a class="link" href="#page01001"><img class="smallcardplot" src="img/01001.jpg"> First Plot Page</a></p>
<p class="line"><img src="img/line.png" width="100% of window";></p>
然后：
<div id="page01001" data-role="page" data-prev="" data-next="#page01002"><div class="wrapper"><ul data-role="listview" data-inset="true"><h2>
First Content Page
</h2></ul> <div data-role="content">
<img src="img/01001.jpg" class="plotimg"> <ul data-role="listview" data-inset="true">
<p>A few lines of text for this page
</ul></div></div></div>