當我動態添加新的日期選擇器時，以前的日期選擇器值重置？

Question

我的表單中包含添加更多字段按鈕，它動態地添加新的datepicker的每當我單擊添加更多字段按鈕。

問題是，當前日期字段在datepicker顯示當前日期。 但是當我添加新日期選擇器通過點擊添加更多的字段按鈕，它增加了一個更加日期選擇器但這次它重置的於前值的DatePicker我已經手動設置。

下面是我的代碼： HTML

<div id="container"> 
<input class="datepick" type="text"></input><button class="add">Add</button> 
<input 
</div> 

的JavaScript

$(".datepick").datepicker(); 
$(".datepick").datepicker().datepicker("setDate", new Date()); 
$(document).on('click', '.add', function() { 
    var appendTxt = '<input class="datepick" type="text" /><button class="add">Add</button>'; 
    $("#container").append(appendTxt); 
    $(".datepick").datepicker(); 
    $(".datepick`enter code here`").datepicker().datepicker("setDate", new Date()); 

}); 

Answer 1

因爲該行的：

$(".datepick").datepicker(); 

所有輸入它們具有類.datepick將重新初始化。你應該做這樣的事情：

$(".datepick").last().datepicker(); 

或

$(".datepick:last").datepicker(); 

你添加新的input.datepick後。這是簡單的解決方案。

如果您在此容器之後的其他容器中有任何其他.datepick，則此操作不起作用。你應該對附加的datepicker元素非常具體。

你應該這樣做：

var appendTxt = '<input class="datepick" type="text" /><button class="add">Add</button>'; 
var newInput = $(appendTxt).appendTo("#container"); 
newInput.datepicker(); 
newInput.datepicker().datepicker("setDate", new Date());