ページ内に複数の日付ピッカーが表示される

Question

私は自分のページにブートストラップのdatepickerを使用しています。

これを使用しているフォームには、動的に生成される複数の日付ピッカーがあります。

今の場合は

今すぐ別の要素を追加し、その入力フィールドをクリックし、あなたが最初の入力要素を選択し、日付をクリックしたとき、それはその入力フィールドの作品です。 datepickerが正しく初期化されません。ここで

は、私がこれまで試したものです

あなたが最初の要素を追加し、入力してクリックすると、それが正常に動作します..

$(function() { 
    var addMilIterator = 0; 
    $(document).on('click', '[data-ele="addMil"]', function(e) { 
    var clone = $('.milestones-form').first().clone(true); 

    $(clone).find('[name]').each(function() { 
     var name = $(this).attr('name'); 
     $(this).val(""); 
     $(this).attr('name', name + '_' + addMilIterator); 
    }); 
    addMilIterator++; 
    $('.milestones-form').last().after(clone); 
    }); 
    $(document).on('focus', '[name^="date"]', function() { 
    $(this).datepicker({ 

    }) 
    }); 
}); 

私はそのためのフィドル場合を作成しました助けになる。すべてのヒントが行います。 Link to fiddle

私の編集が貧弱だからといって、否定的な発言はしないでください。みなさんありがとうございます...

Answer 1

入力を正しくクローンする必要があります。 clone(false)

$(function() { 
    var addMilIterator = 0; 
    $(document).on('click', '[data-ele="addMil"]', function(e) { 
    var clone = $('.milestones-form').first().clone(false); 

    $(clone).find('[name]').each(function() { 
     var name = $(this).attr('name'); 
     $(this).val(""); 
     $(this).attr('name', name + '_' + addMilIterator); 
    }); 
    addMilIterator++; 
    $('.milestones-form').last().after(clone); 
    }); 
    $(document).on('focus', '[name^="date"]', function() { 
    console.log($(this).attr("name")); 
    $(this).datepicker({ 

    }) 
    }); 
}); 

あなたはonclickのを作成しているすべてのクローンが同じid値すなわちを持っているので、これがあるupdate Fiddle

Answer 2

を確認してください。 sandbox-container

属性idは機能するためには一意である必要があります。

あなたはクローンを作成しているあなたのクリックイベントインサイドソリューション

、あなたも&がそうのようなユニークなid値を添付して生成することができます。

var clone = $('.milestones-form').first().clone().prop('id', 'sandbox-container'+ num++); 

は、前にクリックイベント外numを初期化する必要があります。だから、JQueryのコード全体は、次のようになります。

$(function() { 
    var addMilIterator = 0; 
    var num = 1; 

    $(document).on('click', '[data-ele="addMil"]', function(e) { 

    var clone = $('.milestones-form').first().clone().prop('id', 'sandbox-container'+ num++); 

    $(clone).find('[name]').each(function() { 
     ... 
     ... 

Your Fiddle updated