將JQuery日期選擇器動態添加到表單元素

我正在使用克隆方法處理帶有動態添加輸入的表單。每個輸入都需要一個日期選擇器。
每個輸入的名稱將不同以用於輸出。將JQuery日期選擇器動態添加到表單元素

我正在使用Jquery UI Datepicker。發生（該消息在控制檯）的問題是「$ cloned.find（...）。ATTR（...）是不確定的」

我去了另一個崗位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"); 

});

來源

2016-08-12 buck1112

克隆後/插入新錶行，你有.usedatepicker類新元素尚未初始化日期選擇器。

我注意到你正在嘗試初始化新行的日期選擇器之前將它添加到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屬性同樣的事情。

來源

2016-08-12 19:17:06 gibberish

非常感謝您的文章。我有一個問題，關於Jquery Datepicker中的獨特id。當使用諸如此類（https://jsfiddle.net/buck1115/gj2ohyf3/50/）時，Jquery Datepicker會生成唯一的ID。雖然我可以按照你的說法生成它們，但我想知道爲什麼本地代碼似乎在這種情況下不起作用？ – buck1112

我已經在這裏使用了你的建議（https://jsfiddle.net/buck1115/hhzL1kw6/26/），儘管現在我可以生成所有我想要的新（克隆）輸入，只要不點擊輸入框即可英寸。頂行輸入框只會觸發日期選擇器，一旦第二個盒子被點擊/發射。只有最上面的兩個盒子會發射。我的新代碼有不同的ID。我嘗試刪除ID和ID代碼，只是離開課程，但結果相同。 – buck1112

要修改我的最後一條評論 - 控制檯中的錯誤消息是：'TypeError：$ cloned.find（...）。attr（...）is undefined' – buck1112

將JQuery日期選擇器動態添加到表單元素

回答

相關問題