databox プラグインは、静的な jQuery Mobile html ページでうまく機能します。ヘッダーで定義されているスクリプトは次のとおりです。
<link rel="stylesheet" href="http://code.jquery.com/mobile/latest/jquery.mobile.min.css" />
<link rel="stylesheet" type="text/css" href="http://dev.jtsage.com/cdn/datebox/latest/jquery.mobile.datebox.min.css" />
<script src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
<script src="http://code.jquery.com/mobile/latest/jquery.mobile.min.js"></script>
<script type="text/javascript" src="http://dev.jtsage.com/cdn/datebox/latest/jquery.mobile.datebox.min.js"></script>
datebox 入力の行は次のとおりです。
<input name="mydate" id="mydate" type="date" data-role="datebox" data-options='{"mode": "flipbox","useFocus": true}'>
ただし、次のように、他の要素を同じページに動的に挿入すると、
$(document).bind("pagebeforechange", function route(e, data) {
...
$page.trigger('create');
...
その結果、日付ボックス ボタンを含め、すべての要素が適切に表示されていることがわかります。しかし、日付ボックス ボタンをクリックしても、何もポップアップしません。
拡張後の 2 つのバージョンの html コードを比較します。動的なものには、日付ダイアログのポップアップに対応する次のものが欠けていることがわかりました。
<div class="ui-datebox-container ui-overlay-shadow ui-corner-all ui-datebox-hidden pop ui-body-b"
...
動的な方法で上記のコードを生成できなかったのはなぜですか? どうすれば修正できますか?