如何在创建动态HTML页面时使用datepicker

Question

我正在使用jquery mobile在main.js中创建一个动态HTML页面。 我想为我的一个动态创建的HTML输入元素使用日期选择器。当我点击目标发布字段的文本框时，我想要显示日期选择器。

我的动态页面（main.js）：

var newPage=$("<label for='date'>Target Release</label><input type='text' name='date' id='rel' value='' /> rest of my HTML elements goes here"); 
newPage.appendTo($.mobile.pageContainer); 

$.mobile.navigate("#newPage1"); 

我已经添加了下面的代码片段在main.js

$(function() { 

    $("#rel").datepicker(
    {dateFormat: 'MM yy'} 
    ); 
    }); 

我甚至试着写的代码如下所示。

`var newPage=$("<label for='date'>Target Release</label><input type='text' name='date' id='rel' value='' />"+ 

    $("#rel").datepicker(
    {dateFormat: 'MM yy'} 
    ); 

+"rest of my HTML elements goes here"); 

newPage.appendTo($.mobile.pageContainer); 

    $.mobile.navigate("#newPage1");` 

但我没有得到日历小部件。

我已经在index.html中尝试了相同的代码逻辑。它工作正常。请让我知道它为什么不在main.js中工作的原因。 动态创建页面时不能使用Datepicker小部件？

在此先感谢！

Answer 1

由于您在内容出现之前应用日期选择器，您没有获取小部件。添加新内容时，您必须再次应用日期选择器。

看看这个答案更好的解释。

Event binding on dynamically created elements?