2017-04-03 4 views
2

私はを含むフォームを持っていますフィールドの追加ボタンを追加します。これは、Add moreフィールドボタンをクリックするたびに、新しい日付ピッカーのを動的に追加します。新しい日付ピッカーを動的に追加すると、以前の日付ピッカー値がリセットされますか?

問題は、日付ピッカーの現在の日付フィールドに現在の日付が表示されることです。私はより多くのフィールドボタンを追加をクリックして、新しい日付ピッカーを追加するとき しかし、それは日付ピッカー1以上を追加しますが、今回はそれは私が手動で設定していた日付ピッカーの前の値をリセットします。以下は

私のコードです: 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()); 

}); 
+0

を使用すると、コードフローのデバッグがありますか?両方のdatepickerは同じIDを共有してはいけませんか? – Komal

答えて

3

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

クラス.datepickを持っているすべての入力が再初期化されます。新しいinput.datepickを追加した後

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

または

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

:あなたはこのような何かを行う必要があります。これは簡単な解決策でした。

このコンテナの後に他のコンテナに他の.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());