数据框插件在静态 jQuery Mobile html 页面中运行良好。header 中定义的脚本是:
<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>
日期框输入的行是:
<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');
...
结果,我可以看到所有元素都显示得很好,包括日期框按钮。但是单击日期框按钮不会弹出任何内容。
我比较了增强后的两个版本的html代码。我发现动态的漏掉了以下,对应弹出的日期对话框:
<div class="ui-datebox-container ui-overlay-shadow ui-corner-all ui-datebox-hidden pop ui-body-b"
...
为什么动态方式会错过生成上面的代码?我该如何纠正?