使用 jquery 附加 jquery 移动日期框答案

【问题标题】：append jquery mobile datebox using jquery使用 jquery 附加 jquery 移动日期框
【发布时间】：2013-12-01 08:07:51
【问题描述】：

我想使用 jquery 在 div 中附加表单，在此表单中我想附加 jquery 移动日期框

如何以正确的语法在表单中附加日期框？

$('#PersonalInfo').append(
 '<form id="registerForm" class="form" enctype="multipart/form-data">'+

 '<label for="mode2">DateBox</label>'+
 '<input name="mode2" id="mode2" type="text" data-role="datebox" data-  options='{"mode":"datebox", "useNewStyle":true}' />'+
'<input type="submit" value="save" id="submitButton">'+
'</form>');

http://dev.jtsage.com/jQM-DateBox2/

【问题讨论】：

标签： jquery jquery-mobile

【解决方案1】：

更新：这里是 DEMO FIDDLE

您需要对选项周围的单引号进行转义，在输入中设置 type="date"，并在 jQM 中重新触发页面创建。在下面的示例中，我有一个 id="page1" 的页面。在 pageinit 事件中，我添加了动态表单（带有转义引号），然后在页面上调用 trigger('create')：

$("#page1").on("pageinit", function(){

    $('#PersonalInfo').append(
      '<form id="registerForm" class="form" enctype="multipart/form-data">'+
      '<label for="mode2">DateBox</label>'+
      '<input name="mode2" id="mode2" type="date" data-role="datebox" data-options=\'{"mode":"datebox", "useNewStyle":true }\' />'+
      '<input type="submit" value="save" id="submitButton">'+
      '</form>');

    $('#page1').trigger('create');    
});

【讨论】：

这工作正常，日期框出现但没有它的设计？！
对我来说很好用，请看这个小提琴：jsfiddle.net/ezanker/bM72z/1，检查您是否以正确的位置和顺序加载日期框库等。
另外，请确保输入中的 type="date" 而不是 type="text"。