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

的simpliest方法是使用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>