在jQuery对话框中随时随地添加和初始化jQuery数据选择器

Question

我在单击按钮时创建了一个jQuery对话框，并且日期选择器文本框也是在从另一个DIV克隆的对话框中创建的，但是当我单击文本框时，日期选择器并没有像预期的那样弹出。

​

​

<div id='searchdialog'>blank div</div>
<div id='search'>
    <input type='text' id='arrivDate' />
    <input type='text' id='deparDate' />
</div>
<button id="popup" onclick="setPopupForm()">Click</button>

function setPopupForm(){
    $('#searchdialog').html($('#search').html());
    $('#searchdialog').find('#arrivDate').attr('id','arrivDate2');
    $('#searchdialog').find('#deparDate').attr('id','deparDate2');

    $('#searchdialog').dialog({
        height: 280,
        width: 740,
        resizable: false,
        modal: true,
        draggable: true
    });

    $('#arrivDate2').datepicker({
        defaultDate: "+7",
        changeMonth: true,
        numberOfMonths: 1,
    });
}

搜索-已存在的DIV

搜索对话框-将“搜索”的内容添加到此DIV中，并将文本框ids更改为“arrivDate2”和“deparDate2”

当一个按钮被点击时，函数"setPopupForm()“被触发并弹出对话框。但是当我点击‘到货日期2’时，日期选择器没有打开。我试图初始化对话框中的选择器，但仍然不起作用。

请帮我弄清楚这一点。

这是我尝试过的JSFIDDLE。JSFIDDLE

这是我正在做的一个真实的例子。我正在尝试将Find酒店中的内容克隆到一个对话框中，并通过在旅途中更改新的内容Im来创建另外两个日期选择器。EXAMPLE

Answer 1

var content = "<div><input type='text' id='arrivDate' /></div>";
    $('#searchdialog').html(content);
    $('#arrivDate').datepicker({
        defaultDate: "+7",
        changeMonth: true,
        numberOfMonths: 1,
    });
    $('#searchdialog').dialog({height: 280, width: 740, resizable: false, modal: true, draggable: true});

首先为arrivDate调用datepicker，然后为对话框调用搜索对话。

FIDDLE DEMO

Answer 2

您可以尝试简单地将blur应用于输入

var content = "<span id='lala'></span><div><input type='text' id='arrivDate' /></div>";
$('#searchdialog').html(content).blur();
$('#searchdialog').dialog({
    height: 280,
    width: 740,
    resizable: false,
    modal: true,
    draggable: true
});
                /* Here it is */
                /****/
$('#arrivDate').blur().datepicker({
    defaultDate: "+7",
    changeMonth: true,
    numberOfMonths: 1,
});