JQuery Datepicker не работает при добавлении новой строки - JQuery UI - PullRequest
Новая
       7

JQuery Datepicker не работает при добавлении новой строки - JQuery UI

0 голосов
/ 15 ноября 2018

У меня есть datepicker в таблице. <tr> добавляется при нажатии button.

Это нормально работает при заполнении 1-го <tr>, но когда 2-й <tr> создан на button клике, datepicker не работает.

Check My Fiddle

1 Ответ

0 голосов
/ 15 ноября 2018

Этот код должен помочь.Вам необходимо удалить id из ввода даты.Поскольку datepicker использует идентификатор внутри, и это должно быть уникальным.Кроме того, в случае, если вам все еще нужны идентификаторы на каждом поле.Я добавил счетчик, чтобы вы могли создавать уникальные идентификаторы для каждой строки. 

// 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++;

});

Надеюсь, это сработает.

...