JQuery 添加新行时日期选择器不工作 - JQuery UI

Question

我在 table 中有一个 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++;

});

希望有用。

JQuery 添加新行时日期选择器不工作 - JQuery UI

JQuery Datepicker is not working when appending new row - JQuery UI

jquery

jquery-ui

jquery-ui-datepicker

查看我的Fiddle