0
jQuery Mobile和加載其他腳本正在殺死我。我查閱了他們的文檔，並且我明白他們的AJAX模型會帶來一些複雜性，我從這裏獲得了一些幫助來應用這些信息，但是我仍然無法讓所有的工作始終如一地工作。這裏有一個例子：jQuery Mobile：有些腳本正在運行，有些則不是。不知道爲什麼
我有一個頁面有2個表單域，一個是日期和一個是時間。我正在調用日期字段上的jQuery UI Datepicker和時間字段上的第三方Timepicker（this 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和凱文B兩組中讓我瞭解底層腳本使用問題的工具，但我的每一個腳本的問題結束了具有不同額外問題：
- 下面竟是由於日期和時間選擇器不一致 z-index引發的CSS問題。時間選擇器是彈出並正常工作 腳本方式，但由於某種原因，jQueryUI將其z-索引 內聯設置爲零，這將其置於移動頁面覆蓋之後。 CSS 覆蓋（不得不做一個！重要的）修復。
- 與 有問題因爲我有一個PHP 包括將同一個頁腳拖入每個頁面，所以jQuery Countdown是一個ID重複問題。更改爲 解決。
因爲ID必須是唯一的，並且在JQM中，當下一頁導航到頁面時，頁面不會從DOM中刪除，導致兩頁上的任何ID都發生衝突。 – 2013-05-07 18:05:08
@Kevin B這些ID在整個網站上都是唯一的。 – Chaz 2013-05-07 18:27:32