使用 JQuery.load 加载 JQM DateBox 插件答案

【问题标题】：Load JQM DateBox Plugin with JQuery.load使用 JQuery.load 加载 JQM DateBox 插件
【发布时间】：2013-09-12 07:31:51
【问题描述】：

我正在尝试在我的网站中实现 JQM DateBox 插件 (http://dev.jtsage.com/jQM-DateBox2/)。我在单独的 HTML 文件“page2.html”中声明日期选择器的 HTML 代码，并将其加载到“index.html”中的 div 中。将 page2.html 的代码直接放入 div 可以正确显示时间选择器字段：

如果通过 JQuery load() 加载并增强，浏览器会在时间选择器输入字段中显示类似于日期选择器的内容。

点击右侧的按钮会打开时间选择器。我用的是桌面版的 Chrome，在 Firefox 中没有出现这个问题。

page2.html:

<div data-role="fieldcontain">
    <label for="deftimeflip">Some Date</label><input name="deftimeflip" type="date" data-role="datebox" id="deftimeflip" data-options='{"mode": "timeflipbox"}' />
</div>

index.html:

<script>
$(document).ready(function() {
    $('#content').load("page2.html", function(event) {
        $('#content').trigger("create");    // enhance JQM elements

    });
});
</script>

<body>
    <div data-role="page" id="mainPage" data-theme="none">
        <div id="content" style="width:30%;">
            <div data-role="fieldcontain">
                <label for="deftimeflip">Some Date</label><input name="deftimeflip" type="date" data-role="datebox" id="deftimeflip" data-options='{"mode": "timeflipbox"}' />
            </div>
        </div>
    </div>
</body>

没有增强，浏览器只显示日期选择器：

我使用插件的“最新”核心和翻转盒。

希望有人能帮帮我。

【问题讨论】：

标签： jquery datebox

【解决方案1】：

这是因为 DateBox 实际上将输入字段类型设置为文本以避免浏览器增强功能 - 但是，使用 .load 方法，它做得太“晚”（并且失败了）。

解决方法是将类型设置为“文本”而不是“日期”——这样可以去掉额外的控件。

【讨论】：

非常感谢您的回答。由于时间限制，我无法测试它。我终于换成了mobiscroll。