如何动态创建Jquery日期选择器？

Question

对于我的应用程序,我试图在某个事件之后添加一个Jquery Datepicker(对于这个例子,我们只是说当页面加载时).

我目前正在尝试做这样的事情:

    var mealControl = new MealControl();
    $(document).ready(function(){
            mealControl.createMealForm();
        }); //document.ready

    function MealControl() { 
                this.createMealForm = function(){
                        var currentDate = new Date();
                        var prettyCurrentDate = currentDate.getFullYear() + '/' + (currentDate.getMonth() + 1) + '/' + currentDate.getDate();
                        var innerHtml = "<p>Creating meal item data input here</p>" +
                            "<div>Title:<input id=\"mealTitle\" type=\"text\" align=\"center\" width=\"50\" class=\"ui-input-text ui-body-c ui-corner-all ui-shadow-inset\" />" +
                            "<br></div>" + 
                            "<div class=\"ui-input-datebox ui-shadow-inset ui-corner-all ui-body-c\">" +
                            "<div class=\"ui-input-datebox ui-shadow-inset ui-corner-all ui-body-c\">" +
                            "<input data-options=\"{'mode':'calbox','calHighPicked':false, 'calHighToday':true, 'calHighPicked': false}\" data-role=\"datebox\"id=\"datePicker\" value=\"Enter consumption date here\" type=\"text\" align=\"center\" class=\"ui-input-text ui-body-c\"/>" +
                            "<a href=\"#\" class=\"ui-input-clear ui-btn ui-btn-up-c ui-btn-icon-notext ui-btn-corner-all ui-shadow\" title=\"date picker\" data-theme=\"c\" style=\"vertical-align: middle; float: right; \">" +
                            "<span class=\"ui-btn-inner ui-btn-corner-all\" aria-hidden=\"true\">" +
                            "<span class=\"ui-btn-text\">date picker</span>" +
                            "<span class=\"ui-icon ui-icon-grid ui-icon-shadow\"></span></span></a>"
                            "</div>"
                        $("#contentDiv").html(innerHtml);
                    } //createMealForm

当我这样做时,应该调出日期选择器的按钮不会做任何事情.但是,如果我将所有这些元素放入我的

<div data-role="content" id="contentDiv" class="ui-content" role="main">

按钮工作得很好.我完全被这种行为所困扰,任何帮助都会非常感激.

另外,我在其他地方读过它应该很简单

("#datePicker").datepicker();

但这对我也不起作用(Uncaught TypeError:Object [object Object]没有方法'datepicker').

谢谢

Answer 1

它不适合您的原因是因为您绑定datepicker的输入字段在文档就绪时不可用.

在将标记添加到DOM之后,需要绑定日期选择器.

看看这个小提琴

在此行之后添加datepicker应该可行

$("#contentDiv").html(innerHtml);
$('#datePicker').datepicker();