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属性，但输入字段只是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不显示时间选择器

1 个答案: