jQueryのUIの日付ピッカーは

Question

が、私は、ダイナミックinputフィールドを追加しているダイナミックな分野で活躍されていませんが、datepickerは、動的に生成されたフィールドをで動作していません。

$(document).ready(function() { 
 
    $('#text').datepicker(); 
 
}) 
 

 
function addmore() { 
 
    var html = '<div class="form-group"><input type="text" placeholder="text" id="text"><button type="button" onclick="removeInput(this)">&times;</button></div>'; 
 
    $('.input-fields').append(html); 
 
} 
 

 
function removeInput(obj) { 
 
    $(obj).parent().remove(); 
 
}

.form-group { 
 
    margin-bottom: 10px; 
 
}

<script src="https://code.jquery.com/jquery-2.2.4.min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script> 
 
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.css"> 
 
<div> 
 
    <div class="input-fields"> 
 
    <div class="form-group"> 
 
     <input type="text" placeholder="text" id="text"> 
 
    </div> 
 
    </div> 
 
    <button type="button" onclick="addmore()">Add more</button> 
 
</div>

Answer 1

あなたは、すべての追加入力用Id新しいを生成し、その後datepicker機能をリコールする必要があります。

var i = 0; 
 
$(document).ready(function(){ 
 
    $('#text').datepicker(); 
 
}) 
 
function addmore(){ 
 
    i++ 
 
    var html = '<div class="form-group"><input type="text" placeholder="text-'+i+'" id="text-'+i+'"><button type="button" onclick="removeInput(this)">&times;</button></div>'; 
 
    $('.input-fields').append(html); 
 
    $('#text-'+i).datepicker();  
 
} 
 
function removeInput(obj){ 
 
    $(obj).parent().remove(); 
 
}

.form-group { 
 
    margin-bottom: 10px; 
 
}

<script src="https://code.jquery.com/jquery-2.2.4.min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script> 
 
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.css"> 
 
<div> 
 
    <div class="input-fields"> 
 
    <div class="form-group"> 
 
     <input type="text" placeholder="text" id="text"> 
 
    </div> 
 
    </div> 
 
    <button type="button" onclick="addmore()">Add more</button> 
 
</div>

Answer 2

最も単純な方法は、textクラスを使用することです。 text IDを使用しましたが、これは間違った方法です。アイテムを追加するときには、同じidを持つ他の要素のイベントを添付しようとします。

$(document).ready(function() { 
 
    $('.text').datepicker(); 
 
}) 
 

 
function addmore() { 
 
    var html = '<div class="form-group"><input type="text" placeholder="text" class="text"><button type="button" onclick="removeInput(this)">&times;</button></div>'; 
 
    $('.input-fields').append(html); 
 
    $('.text').datepicker(); 
 
} 
 

 
function removeInput(obj) { 
 
    $(obj).parent().remove(); 
 
}

.form-group { 
 
    margin-bottom: 10px; 
 
}

<script src="https://code.jquery.com/jquery-2.2.4.min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script> 
 
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.css"> 
 
<div> 
 
    <div class="input-fields"> 
 
    <div class="form-group"> 
 
     <input type="text" placeholder="text" class="text"> 
 
    </div> 
 
    </div> 
 
    <button type="button" onclick="addmore()">Add more</button> 
 
</div>