jQuery 带有输入的动态创建的行上的日期选择器

datepicker on dynamically created row with inputs

提问by Arjan

I have a form which has the possibility to dynamically create new row with inputs, the date input on each new row should have a datepicker. I have this almost working, but when a new row with inputs is created, the datepicker won't work anymore on the date fields that are already existing. I have played the whole day to find out what i`m doing wrong, but i just can't see how to fix this.

我有一个表单，可以使用输入动态创建新行，每个新行上的日期输入应该有一个日期选择器。我几乎可以正常工作，但是当创建带有输入的新行时，日期选择器将不再适用于已经存在的日期字段。我玩了一整天来找出我做错了什么，但我就是不知道如何解决这个问题。

Here's fiddle -> http://jsfiddle.net/HermesTrismegistus/vdFaH

这是小提琴 - > http://jsfiddle.net/HermesTrismegistus/vdFaH

My form looks like this:

我的表格是这样的：

<table id="productTable" class="table table-striped table-condensed">
     <thead>
        <tr>
         <th>Product</th>
         <th>Datum</th>
         <th>Tijd</th>
         <th>Minuten</th>
        </tr>
     </thead>
    <tbody>   
     <tr>
        <td><input id="products" class="input-medium" name="products[]" type="text" /></td>
        <td><input id="date" class="datepick input-mini" name="date[]" type="text" /></td>
        <td><input id="time" class="input-mini" name="time[]" type="text" /></td>
        <td><input id="minutes" class="input-mini" name="minutes[]" type="text" /></td>
        <td><a id="addnew" href=""><i class="icon-plus"></i></a></td>
      </tr>
    </tbody>
</table>

The jquery i do have, looks like this:

我确实拥有的 jquery 看起来像这样：

    $(function(){
        // start a counter for new row IDs
        // by setting it to the number
        // of existing rows
        $('.datepick').datepicker();

        var newRowNum = 0;

        // bind a click event to the "Add" link
        $('#addnew').click(function(){
            // increment the counter
            newRowNum = $(productTable).children('tbody').children('tr').length +1;

            // get the entire "Add" row --
            // "this" refers to the clicked element
            // and "parent" moves the selection up
            // to the parent node in the DOM
            var addRow = $(this).parent().parent();

            // copy the entire row from the DOM
            // with "clone"
            var newRow = addRow.clone();

            // set the values of the inputs
            // in the "Add" row to empty strings
            $('input', addRow).val('');

            // insert a remove link in the last cell
            $('td:last-child', newRow).html('<a href="" class="remove"><i class="icon-minus"><\/i><\/a>');

            // insert the new row into the table
            // "before" the Add row
            addRow.before(newRow);

            // add the remove function to the new row
            $('a.remove', newRow).click(function(){
                $(this).closest('tr').remove();
                return false;               
            });

            $('#date', newRow).each(function(i){
                var newID = 'date_' + i;
                $(this).attr('id',newID);
            });

            // prevent the default click
            return false;
        });

回答by j08691

Try this, when you add a row, destroy all the datepicker instances and then rebind the datepicker after you append a new row.

试试这个，当你添加一行时，销毁所有的 datepicker 实例，然后在你追加一个新行后重新绑定 datepicker。

jsFiddle example

jsFiddle 示例

回答by Long Ma

In my case, I use clone()to create a copy of datepicker.

就我而言，我clone()用来创建 datepicker 的副本。

$(".cloneDiv").clone().appendTo("#copyHolder");

$(".cloneDiv").clone().appendTo("#copyHolder");

Then I remove the "class" and "id" that datepicker has added to input elements.

然后我删除日期选择器添加到输入元素的“class”和“id”。

$(".hasDatepicker").removeClass("hasDatepicker").removeAttr("id");

$(".hasDatepicker").removeClass("hasDatepicker").removeAttr("id");

NOTE: Since the input elements are to be cloned, I don't give them the "id" attribute. So datepicker automatically adds "id" to my DOM element. In addition, if the element to be cloned has user assigned "id" which means there will be at least two elements sharing the same "id", datepicker will have some problem to find the correct one. An example can be found in @j08691 's answer.

注意：由于要克隆输入元素，所以我不给它们“id”属性。所以 datepicker 会自动将“id”添加到我的 DOM 元素中。此外，如果要克隆的元素具有用户分配的“id”，这意味着至少有两个元素共享相同的“id”，则 datepicker 会遇到一些问题来找到正确的一个。在@j08691 的回答中可以找到一个例子。

Finally, re-bind datepicker to input elements:

最后，将 datepicker 重新绑定到输入元素：

$(".inputDate").datepicker();

$(".inputDate").datepicker();

All the input elements with class "inputDate" will have datepicker.

具有“inputDate”类的所有输入元素都将具有日期选择器。

回答by Nishad Up

Destroy the datepicker and create once again after added the new row. It will resolve the issue.

添加新行后，销毁日期选择器并再次创建。它将解决问题。

Here is the example

这是例子

jQuery( ".datepick" ).datepicker(); //Add date picker.

$('#addnew').click(function(){
   $(".datepick").datepicker("destroy"); //Distroy the date picker.

   /* Code to add a new row */

   jQuery( ".datepick" ).datepicker(); //recreating the date picker

})

回答by PRASANTH SASEENDRAN

This is ur Answer I have done it......

 $(function(){
        // start a counter for new row IDs
        // by setting it to the number
        // of existing rows
        $('.datepick').datepicker();

        var newRowNum = 0;

        // bind a click event to the "Add" link
        $('#addnew').click(function(){
            // increment the counter
            newRowNum = $(productTable).children('tbody').children('tr').length +1;

            // get the entire "Add" row --
            // "this" refers to the clicked element
            // and "parent" moves the selection up
            // to the parent node in the DOM
            var addRow = $(this).parent().parent();

            // copy the entire row from the DOM
            // with "clone"
            var newRow = addRow.clone();

            // set the values of the inputs
            // in the "Add" row to empty strings
            $('input', addRow).val('');

            // insert a remove link in the last cell
            $('td:last-child', newRow).html('<a href="" class="remove"><i class="icon-minus"><\/i><\/a>');

            // insert the new row into the table
            // "before" the Add row
            addRow.before(newRow);

            // add the remove function to the new row
            $('a.remove', newRow).click(function(){
                $(this).closest('tr').remove();
                return false;               
            });

            $('#date', newRow).each(function(i){
              var newID = 'date_' + newRowNum;
           $(this).attr('id', newID).removeClass('hasDatepicker')
                  .removeData('datepicker')
                  .unbind()
                  .datepicker();
                 i++;
            });

            // prevent the default click
            return false;
        });

回答by Lowkase

There is a javascript error showing in the Chrome console:

Chrome 控制台中显示一个 javascript 错误：

Uncaught TypeError: Cannot read property 'inline' of undefined 

This is probably shutting down the datepicker functionality.

这可能会关闭日期选择器功能。