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

Question

我在我的 cordova 应用程序中为 date/time 选择器使用 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 元素。两者看起来一样。第一个没有用，但后来的作品。我哪里不见了？任何人都可以建议我如何进行这项工作吗？

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 增强块内的控件。

FIDDLE

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

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

Jquery Mobile DateBox is not showing time picker if created dynamically

jquery

cordova

jquery-mobile

datepicker

datebox