Cha*_*haz 0 html jquery jquery-ui jquery-mobile jquery-mobile-ajax
jQuery Mobile和加载其他脚本使我丧命。我已经阅读了他们的文档，并且我知道他们的AJAX模型会带来一些复杂性，我从这里可以得到一些帮助以应用这些信息，但是我仍然无法使所有事情始终如一地工作。这是一个例子：
我有一个包含2个表单字段的页面，一个用于日期，一个用于时间。我在日期字段上调用jQuery UI Datepicker，在时间字段上调用第三方Timepicker（此timepicker）。如果我直接访问该页面或进行刷新，则两者都可以正常运行。但是，如果我从其他地方导航到该页面，则仅运行日期选择器。它们都链接在我的文档头中，并且都在页面上用调用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在帮助我了解底层脚本使用问题方面发挥了作用，但是我的每个脚本问题最终都有不同的其他问题：
要了解这种情况，您需要了解jQuery Mobile的工作方式。它使用ajax加载其他页面。
第一页正常加载。它的HEAD和BODY已加载到DOM中，它们在那里等待其他内容。加载第二页时，仅将其BODY内容加载到DOM中。
这就是为什么您的按钮显示成功但单击事件不起作用的原因。在页面转换期间忽略其父HEAD的相同单击事件。
如果您想了解更多信息，请阅读我的另一篇文章：为什么我必须将所有脚本放入jquery mobile中的index.html
这是官方文档：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永远不能作为普通的Web应用程序使用。
<a href="#second" class="ui-btn-right" rel="external">Next</a>
官方文档，请参阅以下章节：不使用Ajax进行链接
现实的解决方案将使用解决方案2。但是与解决方案2不同，我将使用相同的index.js文件，并在每个其他页面的HEAD中初始化它。
现在您可以问我为什么？
像jQuery Mobile这样的Phonegap漏洞百出，迟早会有一个错误，如果您的所有js内容都在单个HTML文件中，则您的应用程序将失败（包括加载的DOM）。可以删除DOM，Phonegap将刷新您的当前页面。如果该页面没有javascript，则在重新启动之前它将无法正常工作。
| 归档时间： |
|
| 查看次数： |
2694 次 |
| 最近记录： |