追加新行时，JQuery Datepicker 不起作用 - JQuery UI

Question

我在一张桌子上有一个datepicker。 <tr> 在点击button 时附加。

填充第一个 <tr> 时可以正常工作，但是在单击button 创建第二个 <tr> 时，datepicker 不起作用。

检查我的Fiddle

Answer 1

这段代码应该可以解决问题。您需要从日期输入中删除 id。因为，datepicker 在内部使用 id 并且它必须是唯一的。此外，如果您仍然需要每个字段上的 ID。我添加了一个计数器，以便您可以为每一行创建唯一的 ID。

// Variable that we will be using to create unique ids.
var counter = 0;

$('#addnew').click(function () {

        //Creating <tr> for cheque details
        var tr = $("<tr><td class='banks'><input type=\"text\" class=\"form-control Product\" name=\"Product"+ counter +"\" id=\"Product"+ counter +"\" placeholder=\"Product\"></td>"
        + "<td><div>"
        + "<div class=\"input-group date\">"
        + "<div class=\"input-group-addon\"><i class=\"fa fa-calendar\"></i>"
        + "</div>"
        + "<input type=\"text\" class=\"form-control Date\" name=\"ChqDate\" id=\"Datet"+ counter +"\" placeholder=\"Date\">"
        + "</div><!-- /.input group -->"
        + "</div></td>"
        + "<td><input type=\"text\" name=\"Price\" class=\"form-control\" id=\"Pricet"+ counter +"\" placeholder=\"Price\" /></td>"
        + "<td><button data-itemId=\"0\" type=\"button\" class=\"btn btn-danger removeRow\">remove</button></td></tr>");

        //append <tr> into table <tbody>

        $('#example1 tbody').append(tr);
        $(tr).find('.Date').datepicker({
                autoclose: true
        });

        counter++;

});

希望它有效。