Question

嗯，我知道有很多关于它的帖子，但到目前为止我已尝试了很多解决方案，但无法使其正常工作。当我克隆div时，使用datepicker克隆的字段会同时发生变化，因此，无论我在一个字段中选择的日期也在另一个字段中。我错过了什么，所以我可以将值重置为新值？

$(document).ready(function() {
$('#btnAdd').click(function() {

$( '.datepicker').datepicker('destroy'); 

var num = $('.clonedInput').length; 
var newNum = new Number(num + 1);   
var newElem = $('#input' + num).clone().attr('id', 'input' + newNum);

newElem.find('#label_val_ini label').attr('for', 'val_ini' + newNum);
newElem.find('#input_val_ini input').attr('class', 'calendario' + newNum).attr('name', 'val_ini[]' + newNum).val('');
newElem.find('#input_val_ini input').attr('class', 'calendario' + newNum).attr('class', 'calendario' + newNum).val('');


newElem.find('#label_val_fim label').attr('for', 'val_fim' + newNum);
newElem.find('#input_val_fim input').attr('class', 'calendario' + newNum).attr('name', 'val_fim[]' + newNum).val('');
newElem.find('#input_val_fim input').attr('class', 'calendario' + newNum).attr('class', 'calendario' + newNum).val(''); 
$('#input' + num).after(newElem);
$('#btnDel').attr('disabled',false);
if (newNum == 50)
$('#btnAdd').attr('disabled',true);
$( '.datepicker').datepicker();
});
$('#btnDel').click(function() {
var num = $('.clonedInput').length; 
$('#input' + num).remove();     
$('#btnAdd').attr('disabled',false);
if (num-1 == 1)
$('#btnDel').attr('disabled',true);
});
$('#btnDel').attr('disabled',true);
});

<form action="inclui_pacote.php" method="post" id="sign-up_area">
<div id="input1" style="margin-bottom:4px;" class="clonedInput">
<table>
 <tr>
<td width="90"><label for="val_ini">Início de validade:</label></td>
<td width="144"><input name="val_ini[]" type="text" class="datepicker" tabindex="1" value=""   size="10" maxlength="10" id="input_val_ini"/></td>

<td width="90"><label for="val_fim">Fim da validade:</label></td>
<td width="144"><input name="val_fim[]" type="text" class="datepicker" tabindex="1" value="" size="10" maxlength="10" id="input_val_fim"/></td>
 </tr>
 </table>
 </div>
  <input type="button" id="btnAdd" value="+ Hotel" />
  <input type="button" id="btnDel" value="- Hotel"/>
  <input name="cadastrar" type="submit" value="Cadastrar">
  </form>

Answer 1

为什么要克隆datePicker？

从一开始创建另一个datePicker，在需要时隐藏它，并在更改第一个datePicker的值时更改其值不能完成这项工作？

问题是，一旦应用了插件，datePicker就不再是单个DOM对象了。因此克隆原始DOM元素，即使使用其所有datePicker数据也不会创建对象。

另一个解决方案是克隆原始的datePicker，创建一个新的INPUT元素，在其上应用datePicker，然后再给它第一个DatePicker的值。

Answer 2

jQuery创建一个类和一个ID，并且都被克隆;也不应该在克隆中。

    $('.calendar:last').removeClass('hasDatepicker').attr('id',"").datepicker();

我希望这对你有用，就像它对我一样。

克隆datepicker

2 个答案: