我有一个表单,可以动态创建带输入的新行,每个新行的日期输入应该有一个日期选择器.我有这个几乎工作,但是当创建带输入的新行时,datepicker将不再适用于已存在的日期字段.我玩了整整一天来找出我做错了什么,但我只是看不出如何解决这个问题.
这是小提琴 – > 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; });
解决方法
试试这个,当你添加一行时,销毁所有的datepicker实例,然后在追加一个新行后重新绑定datepicker.