Question

我有一个datepicker输入（jquery UI），如下所示

<div class="row more-info-1">
<input class="pi-datepicker" type="text">
</div>

<a href="javascript:void(0)" onclick="addMoreDetails(1)">Add More</a>

我需要多次克隆此输入，所以我的javascript是：

$('.pi-datepicker').datepicker({ dateFormat: 'dd-mm-yy' });
function addMoreDetails(nit_quotation_id) {
    $latest_div     = $('.more-info-'+nit_quotation_id+':last');  

    $latest_div.datepicker('destroy').removeAttr('id')

    $clone          = $latest_div.clone(false);

    $latest_div.after($clone);
    $clone.find('input.pi-datepicker')
      .removeClass('hasDatepicker')
      .removeData('datepicker')
      .unbind()
      .datepicker({ dateFormat: 'dd-mm-yy' });
}

但是当我点击克隆的输入时，会出现datepicker屏幕，但是在第一个输入框中更改了值。请检查FIDDLE

Answer 1

这是因为您的输入控件具有相同的ID（dd_date）。当您点击下面的“添加更多”时，每次更新您的输入控件ID。

$clone.find('input.pi-datepicker')
  .removeClass('hasDatepicker')
  .removeData('datepicker')
  .attr('id', 'dd_date' + Math.random()) //newly added line
  .unbind()
  .datepicker({ dateFormat: 'dd-mm-yy' });

Updated Fiddle DEMO

克隆的datepicker输入无法正常工作

1 个答案: