克隆日期选择器输入工作不

问题描述：

我有一个日期选择器输入（jQuery用户界面），如下克隆日期选择器输入工作不

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

但是，当我点击克隆的输入，出现日期选择器屏幕，但在第一个输入框中更改了值。请检查FIDDLE

答

这是因为您的输入控件具有相同的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

克隆日期选择器输入工作不

相关推荐