jQuery Mobile和加载其他脚本正在扼杀我。我已经回顾了他们的文档，我明白他们的AJAX模型会带来一些复杂性，我从这里得到了一些帮助来应用这些信息，但我仍然无法让所有内容始终如一地工作。这是一个例子：
我有一个包含2个表单字段的页面，一个用于日期，一个用于时间。我在日期字段上调用jQuery UI Datepicker，在时间字段（this timepicker）上调用第三方Timepicker。如果我直接访问页面或刷新，两者都运行正常。但是，如果我从其他地方导航到该页面，则只运行datepicker。它们都链接在我的文档头中，并且都在pageinit的页面上调用。为什么一个工作而另一个工作呢？
目：
<!DOCTYPE html>
<!--[if IE 8]> <html class="no-js lt-ie9" lang="en" > <![endif]-->
<!--[if gt IE 8]><!--> <html class="no-js" lang="en" > <!--<![endif]-->
<head>
<meta charset="utf-8">
<title>Test Site</title>
<!-- Make it Mobile friendly -->
<meta name="HandheldFriendly" content="True">
<meta name="MobileOptimized" content="320">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv="cleartype" content="on">
<!-- Stylesheets -->
<link rel="stylesheet" href="_css/normalize.css" />
<link href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" rel="stylesheet">
<link rel="stylesheet" href="_css/jquery.mobile.structure-1.3.1.css" />
<link rel="stylesheet" href="_css/red_variant/red_variant.css" />
<link href="_libraries/jquery-ui-timepicker-0.3.2/jquery.ui.timepicker.css" rel="stylesheet" type="text/css" />
<link rel="stylesheet" href="_css/foundation.css" />
<link rel="stylesheet" href="_css/main.css" />
<!-- jQuery Including UI and Mobile -->
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="http://code.jquery.com/ui/1.10.2/jquery-ui.js" type="text/javascript"></script>
<script src="http://code.jquery.com/mobile/1.3.1/jquery.mobile-1.3.1.min.js" type="text/javascript"></script>
<script src="_libraries/jquery-ui-timepicker-0.3.2/jquery.ui.timepicker.js" type="text/javascript"></script>
</head>
有问题的表格：
<form>
<label for="addAgendaDate" class="ui-hidden-accessible">Date:</label>
<input name="addAgendaDate" id="addAgendaDate" placeholder="Date" value="" type="text">
<label for="addAgendaTime" class="ui-hidden-accessible">Time:</label>
<input name="addAgendaTime" id="addAgendaTime" placeholder="Time" value="" type="text">
</form>
<script>
$(document).on('pageinit', function(){
$( "#addAgendaTime" ).timepicker({
showPeriod: true,
showLeadingZero: true
});
});
$(document).on('pageinit', function(){
$( "#addAgendaDate" ).datepicker();
});
</script>
我错过了什么导致两者都能正常加载页面，但只有一个加载jQuery Mobile AJAX？
已解决！花了一个月的时间，但我终于绕过了这个。 Gajotres和Kevin B帮助我理解底层脚本使用问题，但我的每个脚本问题最终都有不同的其他问题：
答案 0 :(得分：4)
要了解这种情况，您需要了解jQuery Mobile的工作原理。它使用ajax加载其他页面。
第一页正常加载。其 HEAD 和 BODY 已加载到 DOM 中，他们可以等待其他内容。加载第二页时，仅 BODY 内容会加载到 DOM 中。
这就是为什么您的按钮成功显示但点击事件无效的原因。在页面转换期间忽略其父HEAD的相同点击事件。
如果您想了解更多内容，请阅读我的其他文章： Why I have to put all the script to index.html in jquery mobile
以下是官方文档：http://jquerymobile.com/demos/1.2.0/docs/pages/page-links.html
不幸的是，你不会在他们的文档中找到这个描述。以太他们认为这是一种常识，或者他们忘记将其描述为我的其他主题。 （jQuery Mobile文档很大但缺少很多东西）。
在第二页和其他每个页面中，将您的SCRIPT标记移动到BODY内容中，如下所示：
<body>
<script>
// Your javascript will go here
</script>
// And rest of your HTML content
</body>
这是一个快速解决方案，但仍然是一个丑陋的解决方案。
将所有javascript移动到原始的第一个HTML中。收集所有内容并将其放入单个js文件中，放入HEAD中。在加载jQuery Mobile之后初始化它。
<head>
<meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; minimum-scale=1.0; user-scalable=no; target-densityDpi=device-dpi"/>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.css" />
<script src="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.js"></script>
<script src="index.js"></script> // Put your code into a new file
</head>
最后，我将描述为什么这是一个好的解决方案的一部分。
在按钮中使用 rel =“external”，以及用于更改页面的每个元素。因为它ajax希望用于加载页面，你的jQuery Mobile应用程序将表现得像一个普通的Web应用程序。不幸的是，这不是一个很好的解决方案。 Phonegap绝不应该像普通的网络应用程序一样工作。
<a href="#second" class="ui-btn-right" rel="external">Next</a>
官方文档，寻找章节： Linking without Ajax
现实的解决方案将使用解决方案2 。但与解决方案2不同，我会使用相同的index.js文件并在每个可能的其他页面的HEAD内初始化它。
现在你可以问我为什么？
像jQuery Mobile这样的Phonegap是错误的，如果你的每个js内容都在一个HTML文件中，迟早会出现错误并且你的应用程序会失败（包括加载的DOM）。 DOM可以被删除，Phonegap将刷新您当前的页面。如果该页面没有javascript，那么在重新启动之前它将无效。