Question

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

我正在使用Jquery UI Datepicker。发生的问题（控制台中的消息）是＆＃34; $ cloned.find（...）。attr（...）未定义＆＃34;

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

代码如下：

 <table>
 <tr>
 <td name="a" class="FormLabel" width="100px"><strong>Class Year*</strong></td>
 <td width="100px"><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"); 

 });

Answer 1

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

我注意到您正在尝试使用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
}

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

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

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

1 个答案: