Jquery 无法在克隆行上使用引导日期选择器。值始终保留在第一个日期字段上

我在尝试使用引导日期选择器和引导克隆行时发现了这个问题

复制步骤： 1.选择第一个输入日期（id\u form-0-expense\u date\u item）后，用户可以选择日期。 2.添加另一行并选择第二个输入日期用户将使用日期选择器再次显示，但当日期为select时，值将转到第一个输入字段。id\u表-0-费用\u日期\u项目

我可以克隆行，但日历日期始终保留在第一个字段（id\u form-0-expense\u date\u item）。 当使用jQueryUI1.10.3时，它可以正常工作

示例如下：

属性名
纵队
包含
添加行

===

---

根据charlietfl的建议，我已将clone（true）更改为false，并在新行上重新初始化了datepicker，如下所示

---

“始终在同一领域”是什么意思？当我拉小提琴时——我不知道我应该输入什么，也不知道当我输入时会发生什么……1）不要在评论中告诉我。这些东西应该是你问题的一部分：）请编辑你的问题并在那里添加信息——以及你能想到的任何可能相关的东西；）不要使用clone（true）然后在新行上重新初始化datepicker 2）我已经明确表示“它始终保持在同一个字段上”没有足够的意义。。。请用不同的词来解释，你的解释要更完整。。尤其要注意解释什么是“it”？你应该避免与他人使用“it”—具体点），以及“在同一领域”意味着什么。。。那是什么领域？与什么相同的字段？忽略代码。。。用户在字段中键入内容时应该看到什么？他们应该输入什么。他们应该点击什么。。。当他们这样做时，他们应该看到什么？我不想弄明白你想用你的代码做什么。。。。你应该告诉我预期的行为是什么：）

<table id="id_forms_table" border="0" cellpadding="0" cellspacing="5">
   <thead>
      <tr>
         <th scope="col">&nbsp;</th>
         <th scope="col">Property name</th>
         <th scope="col">&nbsp;</th>
         <th scope="col">&nbsp;</th>
      </tr>
   </thead>
   <tbody>
      <tr id="form-0-row" class="dynamic-form">
         <td> 
   <input class="datepicker" id="id_form-0-expense_date_item" name="form-0-expense_date_item" type="text" />
         </td>
         <td> Column </td>
         <td> Contains </td>
         <td>
            <a id="remove-form-0-row" href="javascript:void(0)" class="delete-row">delete row</a>
         </td>
      </tr>
   </tbody>
</table>
<div>
<button>Add Row</button>
  </div>

<!--

 $(function() {
     // datepicker plugin
     $(".datepicker").datepicker({
         changeMonth: true,
         changeYear: true,
         // You can put more options here.
                     autoclose: true,
            startDate: new Date()
     });

 })

function updateElementIndex(el, prefix, index){
     var id_regex = new RegExp('(' + prefix + '-\\d+)');
     var replacement = prefix + '-' + index;
     if ($(el).attr("for")) $(el).attr("for", $(el).attr("for").replace(id_regex, replacement));    
     if (el.id) el.id = el.id.replace(id_regex, replacement);
     if (el.name) el.name = el.name.replace(id_regex, replacement);    

}

var i = 1;
$("button").click(function() {
    //Destroy datepickers
    $('.datepicker').datepicker('destroy');
    myTr = $("#id_forms_table tbody tr:first").clone(true).appendTo("table");
    //Remove classes datepickers
    //myTr.removeClass('hasDatepicker').find("input");
    updateElementIndex(myTr, 'form', 1); 
    myTr.removeClass('hasDatepicker').find("input").each(function() {
        $(this).attr({
            'id': function(_, id) { return id + i },
            'name': function(_, name) { return name + i },
            'value': ''
        });
    });
    //myTr.find('input[id^="datep"]').addClass("mydatepickers");
    $(".datepicker").datepicker();
    i++;
});

$(document).on('click', '.delete-row', function() {
    $(this).closest("tr").remove();
    return false;
});



 $(function() {
     // datepicker plugin
     $(".datepicker").datepicker({
         changeMonth: true,
         changeYear: true,
         // You can put more options here.
                     autoclose: true,
            startDate: new Date()
     });

 })


 //-->

 $(function() {
     // datepicker plugin
     $(".datepicker").datepicker({
         changeMonth: true,
         changeYear: true,
         // You can put more options here.
                     autoclose: true,
     });

 })

function updateElementIndex(el, prefix, index){
     var id_regex = new RegExp('(' + prefix + '-\\d+)');
     var replacement = prefix + '-' + index;
     if ($(el).attr("for")) $(el).attr("for", $(el).attr("for").replace(id_regex, replacement));    
     if (el.id) el.id = el.id.replace(id_regex, replacement);
     if (el.name) el.name = el.name.replace(id_regex, replacement);    

}

var i = 1;
$("button").click(function() {
    //Destroy datepickers
    $('.datepicker').datepicker('destroy');
    myTr = $("#id_forms_table tbody tr:first").clone(false).appendTo("table");
    //Remove classes datepickers
    //myTr.removeClass('hasDatepicker').find("input");
    updateElementIndex(myTr, 'form', 1); 
    myTr.removeClass('datepicker').find("input").each(function() {
        $(this).attr({
            'id': function(_, id) { return id + i },
            'name': function(_, name) { return name + i },
            'value': ''
        });
    });
    //myTr.find('input[id^="datep"]').addClass("mydatepickers");
    $(".datepicker").datepicker({
         changeMonth: true,
         changeYear: true,
         // You can put more options here.
                     autoclose: true,
     });
    i++;
});

$(document).on('click', '.delete-row', function() {
    $(this).closest("tr").remove();
    return false;
});



 $(function() {
     // datepicker plugin
     $(".datepicker").datepicker({
         changeMonth: true,
         changeYear: true,
         // You can put more options here.
                     autoclose: true,
     });

 })