Question

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

这是小提琴 - ＆gt; http://jsfiddle.net/HermesTrismegistus/vdFaH

我的表单如下：

<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>

我有的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;
        });

Answer 1

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

<强> jsFiddle example

Answer 2

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

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

然后我删除了datepicker添加到输入元素的“class”和“id”。

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

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

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

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

所有带有“inputDate”类的输入元素都将具有datepicker。

Answer 3

Chrome控制台中显示javascript错误：

Uncaught TypeError: Cannot read property 'inline' of undefined

这可能会关闭datepicker功能。

Answer 4

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

Answer 5

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

以下是示例

[root@b59 conf]# nodetool gossipinfo
/12.111.41.22
  generation:1524471400
  heartbeat:755047
  STATUS:20:NORMAL,-1025782309085114491
  LOAD:754953:4.7034856044E10
  SCHEMA:69:79958430-ad10-34dd-baf9-1ac87e9e7910
  DC:7:datacenter1
  RACK:9:rack1
  RELEASE_VERSION:5:3.6.0
  RPC_ADDRESS:4:12.111.41.22
  SEVERITY:755049:0.5
  NET_VERSION:2:10
  HOST_ID:3:65f7597b-2l42-4bcb-a65a-53c25d4b7a13
  RPC_READY:53:true
  TOKENS:19:<hidden>
/261.4.55.161
  generation:1524717007
  heartbeat:1500
  STATUS:1502:LEFT,-1003381131543138657,1524976696131
  LOAD:1481:6.4782307931E10
  SCHEMA:10:79958430-ad10-34dd-baf9-1ac87e9e7910
  DC:6:datacenter1
  RACK:8:rack1
  RELEASE_VERSION:4:3.6
  RPC_ADDRESS:3:261.4.55.161
  SEVERITY:1499:0.0
  NET_VERSION:1:10
  HOST_ID:2:a98d0b43-2b66-4b95-b8a6-e81197d9eb9d
  RPC_READY:42:true
  TOKENS:13:<hidden>

具有输入的动态创建行上的datepicker

5 个答案: