JavaScript 生成字段上的 Datepicker JQuery答案

【问题标题】：Datepicker JQuery on JavaScript generated fieldsJavaScript 生成字段上的 Datepicker JQuery
【发布时间】：2012-04-29 04:03:54
【问题描述】：

我正在向动态生成的字段添加日期选择器。

('#addScnt1').live('click', function() {
$('<p class="textocampodetexto" style="margin-left:20px; margin-top:20px;"> 
<label for="p_scnts1">  <input id="au_fechainicioperiodo2" 
name="au_fechainicioperiodo2" type="text" size="7"  
value="" /> </p>').appendTo(scntDiv);

当我单击“添加字段”按钮时会添加这些字段。

当我点击生成的字段时，日期选择器没有出现。我知道 datepicker 正在工作，因为我将代码放在 javascript 代码之外并且它可以工作。

那我该如何实现呢？

【问题讨论】：

你在哪里调用 .datepicker()？
请查看此答案以帮助自己。 stackoverflow.com/questions/1396536/…

标签： javascript jquery dom user-interface datepicker

【解决方案1】：

您将不得不将日期选择器重新附加到您的输入字段。

试试这里找到的解决方案：Why does jQuery UI's datepicker break with a dynamic DOM?

代码与您的代码不同，但如果您可以从选择器中提取输入字段，您就可以做到。

【讨论】：

【解决方案2】：

您的代码应该像这样工作（LIVE DEMO）：

$(function () 
{
  $('#addScnt1').click(function() {

    $('<p class="textocampodetexto" style="margin-left:20px; margin-top:20px;"><label for="p_scnts1">  <input id="au_fechainicioperiodo2" name="au_fechainicioperiodo2" type="text" size="7" value="" /> </p>').appendTo(scntDiv);
    $('#au_fechainicioperiodo2').datepicker(
    {
        showOn: "both",
        dateFormat: "dd M yy",
        firstDay: 1, 
        changeFirstDay: false
    });
  });
});

（注意：我假设变量scntDiv在此调用之前是用DOM对象定义的）

【讨论】：

【解决方案3】：

$('#addScnt1').live('click', function() {
    var newElement = $('all your html'); //then append it wherever

    newElement.find('.input-selector').datepicker();
});

【讨论】：