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 の読み込みでは 1 つしか動作しない原因は何ですか?
解決しました！ 1か月かかりましたが、ようやく頭に浮かびました。Gajotres と Kevin B は、根底にあるスクリプトの使用に関する問題を理解するのに役立ちましたが、スクリプトの問題のそれぞれに、さまざまな追加の問題が発生しました。
- 以下の日時ピッカーの不一致は、実際には z-index の CSS の問題が原因でした。タイム ピッカーはポップし、スクリプト的には正常に動作していましたが、何らかの理由で jQueryUI が z-index インラインをゼロに設定していたため、モバイル ページ オーバーレイの背後に配置されていました。CSS オーバーライド (!important を実行する必要がありました) により、これが修正されました。
- 各ページに同じフッターをプルする PHP が含まれていたため、jQuery カウントダウンに問題がありました。これは ID の重複の問題でした。解決するクラスに変更されました。