将 JQuery Datepicker 动态添加到表单元素

Posted 2023-05-09

【中文标题】将 JQuery Datepicker 动态添加到表单元素

【英文标题】：Adding JQuery Datepicker Dynamically to Form Elements

【发布时间】：2016-12-19 21:09:25

【问题描述】：

我正在使用克隆方法处理具有动态添加输入的表单。每个输入都需要一个日期选择器。 每个输入的名称对于输出都是不同的。

我为此使用 Jquery UI Datepicker。 出现的问题（控制台中的消息）是“$cloned.find(...).attr(...) is undefined”

我去了另一个帖子jQuery DatePicker not working on newly added row 并尝试删除 hasDatepicker 类（包含在下面的代码中），但问题仍然存在。 感谢您提供任何输入或资源。

代码如下：

 <table>
 <tr>
 <td name="a" class="FormLabel" ><strong>Class Year*</strong></td>
 <td ><input type="text" id="datepicker" name="ClassYear_1" class="usedatepicker" value="" tabindex="4" /></td>
  </tr>
  </table>
  <button type="button" id="add-btn" name="add-btn">Add Class Year</button>

JS代码：

 function clone2()
 var $cloned = $('table tr:last').clone();
 $cloned.removeClass('hasDatepicker').datepicker();
 //console.log($(this));
 //alert($(this).attr('name'));
 var oldIndex = $cloned.find('input').attr('name').match(/\d+/);
 var newIndex = parseInt(oldIndex,10)+1;
 $cloned.find('input').each(function()
 var newName = $(this).attr('name').replace(oldIndex, newIndex);
 $(this).attr('name', newName);
 );
 $cloned.insertAfter('table tr:last');
 

 $('#add-btn').click( function() 
 clone2();  
 );


 //attach datepicker - begin
 $(document).ready(function() 

 $(".usedatepicker").datepicker(); // or 
 $(".usedatepicker").datepicker("refresh"); 

 );

【参考方案1】：

克隆/插入新表格行后，您有尚未使用 datepicker 初始化的 .usedatepicker 类的新元素。

我注意到您正在尝试使用 datepicker 在 将新行添加到 DOM 之前对其进行初始化。两个问题。首先，您尝试将 datepicker 初始化到整个（新）行，而不仅仅是输入字段，其次，您必须在将行注入 DOM 后执行此操作。

试试这样的：

function clone2()
    var $cloned = $('table tr:last').clone();
    $cloned.removeClass('hasDatepicker').datepicker();
    //console.log($(this));
    //alert($(this).attr('name'));
    var oldIndex = $cloned.find('input').attr('name').match(/\d+/);
    var newIndex = parseInt(oldIndex,10)+1;
    $cloned.find('input').each(function()
        var newName = $(this).attr('name').replace(oldIndex, newIndex);
        $(this).attr('name', newName);
    );
    $cloned.insertAfter('table tr:last');

    $(".usedatepicker").datepicker();  //<=== NEW

另一个说明： 您有一个值为datepicker 的ID。克隆行时，您将拥有多个具有相同 ID 的元素。一个不，不。将 ID 更改为一个类，一切都会正常工作。请注意，类和 ID 之间的唯一本质区别是您不能对多个元素使用相同的 ID。 简单的解决方案：将 ID 切换到类。

如果这还不够好，可能是因为您需要直接通过唯一 ID 来处理每个输入字段，请对 ID 属性执行与 name 属性相同的操作。

【讨论】：

非常感谢您的帖子。我有一个关于 Jquery Datepicker 中不同 ID 的问题。当像这样使用 (jsfiddle.net/buck1115/gj2ohyf3/50) 时，Jquery Datepicker 会生成唯一的 id。虽然我当然可以按照你的说法生成它们，但我想知道为什么原生 id 生成在这种情况下似乎不起作用？

我在这里使用了你的建议 (jsfiddle.net/buck1115/hhzL1kw6/26)，尽管现在，我可以生成所有我想要的新（克隆）输入，前提是没有点击输入框。顶部行输入框只会在第二个框被点击/触发后触发日期选择器。只有最上面的两个盒子会开火。我的新代码有不同的 ID。我尝试删除 ID 和 ID 代码，只是离开了班级，但结果相同。

修改我上一条评论-控制台中的错误消息是：TypeError: $cloned.find(...).attr(...) is undefined