如果动态创建，Jquery Mobile DateBox 不显示时间选择器答案

【问题标题】：Jquery Mobile DateBox is not showing time picker if created dynamically如果动态创建，Jquery Mobile DateBox 不显示时间选择器
【发布时间】：2015-09-21 11:20:12
【问题描述】：

我在我的科尔多瓦应用程序中使用 Jquery Mobile DateBox 插件作为日期/时间选择器。如果编写为 HTML 文件，它可以正常工作。如果我克隆一个具有 DateBox 输入的 div 并将其附加到另一个 div，就会出现问题。时间选择器没有在点击计时器图标时弹出。

我要克隆的 div 是，

<div class="time-picker-template">

    <input class="time-input day-time-picker" type="text" data-role="datebox" data-options='{"mode":"timebox", "useNewStyle":true}' />

</div>

我克隆的方式是，

var dayTimePicker = $("#page-add-reminder .time-picker-template").clone();

$("#page-add-reminder #time-picker-block").append(dayTimePicker);

它呈现 DateBox 输入字段，但它被禁用。当我检查元素时，它显示，

<input class="time-input day-time-picker" type="text" data-role="datebox" data-options="{"mode":"timebox", "useNewStyle":true}" readonly="readonly">

我最初怀疑只读属性，但输入字段将是只读的。在其他情况下，点击输入字段旁边的时间图标填充时间。

我比较了克隆元素和一般 TimeBox 元素的 DOM 元素。两者看起来都一样。第一个不起作用，但后来的工作。我在哪里失踪？任何人都可以建议我如何完成这项工作吗？

【问题讨论】：

标签： jquery cordova jquery-mobile datepicker datebox

【解决方案1】：

克隆日期框时，您应该将模板放在页面之外，这样 jQM 在克隆并将它们添加到页面之前不会增强。这是一个工作演示：

<div id="templates">
    <div class="time-picker-template">
        <input class="time-input day-time-picker" type="text" data-role="datebox" data-options='{"mode":"timebox", "useNewStyle":true}' />
    </div>
</div>

<div data-role="page" id="page1">
    <div role="main" class="ui-content">
        <button id="btnAdd">Add timepicker from template</button>
        <div id="time-picker-block"></div>
    </div> 
</div>  

$(document).on("pagecreate","#page1", function(){     
    $("#btnAdd").on("click", function(){
        var dayTimePicker = $("#templates .time-picker-template").clone();
        $("#time-picker-block").append(dayTimePicker).enhanceWithin();        
    });
});

当您单击按钮时，未增强的模板被克隆并添加到页面中，然后我们调用 enhanceWithin() 来告诉 jQM 增强块内的控件。

FIDDLE

您也可以在脚本中将模板作为字符串。

【讨论】：