动态创建的行与输入的datepicker [英] datepicker on dynamically created row with inputs

问题描述

我有一个表单可以动态创建具有输入的新行，每一行的日期输入应该有一个日期戳。我有这几乎工作，但是当创建一个新的输入行时，datepicker将不再工作在已存在的日期字段上。我已经玩了整整一天，找出我做错了，但我看不出如何解决这个问题。

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

我的表单看起来像这样：

 < table id =productTableclass =table table-striped table-condensed> ; 
< thead> 
< tr> 
< th>产品< / th> 
< th>基准< / th> 
< th> Tijd< / th> 
< th> Minuten< / th> 
< / tr> 
< / thead> 
< tbody> 
< tr> 
< td>< input id =productsclass =input-mediumname =products []type =text/>< / td> 
< td>< input id =dateclass =datepick input-mininame =date []type =text/>< / td> 
< td>< input id =timeclass =input-mininame =time []type =text/>< / td> 
< td>< input id =minutesclass =input-mininame =minutes []type =text/>< / td> 
< td>< a id =addnewhref =>< i class =icon-plus>< / i>< / a>< / td> 
< / tr> 
< / tbody> 
< / table> 
  

我有这样的jQuery，看起来像这样：

  $（function（）{
 //通过将其设置为数字
 //为新行ID启动计数器
 //的现有行
 $（'。datepick'）。datepicker（）; 
 
 var newRowNum = 0; 
 
 //将一个点击事件绑定到添加link 
 $（'＃addnew'）。click（function（）{
 // increment the counter 
 newRowNum = $（productTable）.children（'tbody' tr'）长度+1; 
 
 //获取整个添加行 -  
 //this是指点击的元素
 //和parent 将选择向上移动
 //到DOM中的父节点
 var addRow = $（this）.parent（）。parent（）; 
 
 //复制整个行从DOM 
 //与clone
 var newRow = addRow.clone（）; 
 
 //将Add行中的输入
 //的值设置为空字符串
 $（'input'，addRow）.val（''）; 
 
 //在最后一个单元格中插入一个删除链接
 $（'td：last-child'，newRow）.html（'< a href =class =remove >< i class =icon-minus>< \ / i>< \ / a>'）; 
 
 //将新行插入表
 //before添加行
 addRow.before（newRow）; 
 
 //将remove函数添加到新行
 $（'a.remove'，newRow）.click（function（）{
 $（this）.closest 'tr'）。remove（）; 
 return false; 
}）; 
 
 $（'＃date'，newRow）.each（function（i）{
 var newID ='date_'+ i; 
 $（this） id'，newID）; 
}）; 
 
 //防止默认点击
 return false; 
}）; 
  

解决方案

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

jsFiddle示例

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

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:

    $(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;
        });

解决方案

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

jsFiddle example

这篇关于动态创建的行与输入的datepicker的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！