动态创建的jQuery Mobile DateBox不显示时间选择器

Question

我在我的cordova应用程序中将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">

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

我比较了克隆元素和常规TimeBox元素的DOM元素。 两者看起来都一样。 前一个没有用，但后来有用。 我在哪里想念？ 可以建议我如何进行这项工作吗？

Answer 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增强该块中的控件。

小提琴

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