如何使用jQuery克隆帶日期選擇器的錶行使用jQuery

Question

我遇到類似的問題。我可以克隆行並且日期選擇器適用於焦點事件，但該按鈕始終指向已克隆的初始行。我已經嘗試了「.removeClass（'hasDatepicker'）」，這是什麼使日期選擇器被克隆。有誰知道爲什麼按鈕還沒有工作？

這裏是我的代碼：

$(document).ready(function() { 
    $(function() { 
     $('#addNew').click(function() { 
      var tbody = $('#entries tbody'); 
      var rows = tbody.find('tr').length; 
      var newRow = tbody.find('tr:first').clone(true).appendTo(tbody); 
      newRow.find(':input').val('').each(function() { 
       var id = this.id 
       if (id) { 
        this.id = this.id.split('_')[0] + '_' + rows; 
       } 
      }).end().find('.datepicker').removeClass('hasDatepicker').datepicker(); 
     }); 
     $('.datepicker').datepicker({ 
      autoSize: true, 
      changeMonth: true, 
      changeYear: true, 
      gotoCurrent: true, 
      showOn: 'both', 
      buttonImage: '@Url.Content("~/Content/calendar.png")', 
      buttonText: 'Choose Treatment Date', 
      NextText: 'Next', 
      prevText: 'Previous', 
      showButtonPanel: true 
     }); 
    }); 
}); 

<fieldset> 
    <h4>Procedures</h4> 
    <table id="entries" border="1"> 
     <tbody> 
      <tr> 
       <td> 
        Date of Service 
        <br /> 
        <input type="text" id="DateOfService" class="datepicker" /> 
       </td> 
       <td> 
        Procedure Code 
        <br /> 
        <input type="text" id="ProcedureCode" /> 
        <br /> 
        <a href="#" id="procedureLookup">Lookup</a> 
       </td> 
       <td> 
        Description 
        <br /> 
        <input type="text" id="ProcedureCodeDescription" /> 
       </td> 
       <td> 
        <div id="hasToothAndSurface"> 
         Tooth 
         <br /> 
         <input type="text" id="Tooth" /> 
         <br /> 
         Surface 
         <br /> 
         <input type="text" id="Surface"/> 
        </div> 
        <div id="NoToothSurface" style="display:none"> 
         <label for="txtNoToothSurface">Tooth/Surface</label> 
         N/A 
        </div> 
        <br /> 
        <a href="#" id="toothSurfaceLookup">Lookup</a> 
       </td> 
       <td> 
        Fee $ 
        <br /> 
        <input type="text" id="ProcedureFee" /> 
       </td> 
       <td><button type="button" id="deleteRow" class="remove">Remove</button></td> 
      </tr> 
     </tbody> 
    </table> 
    <button type="button" id="addNew">Add Procedure</button> 
</fieldset> 

我願意接受任何建議。我需要用戶能夠添加n-many記錄，然後將它們發佈到我的asp.net控制器，以便我可以處理它們。我正在考慮將輸入的名稱更改爲以下內容：

<input type="text" name="in_dateofService[]" /> 
<input type="text" name="in_code[]" class="my_date" /> 
<input type="text" name="in_tooth[]" /> 
<input type="text" name="in_surface[]" /> 
<input type="text" name="in_fee[]" /> 

因爲看起來我可以將它們作爲帖子上的數組處理。那是對的嗎？

Answer 1

你需要做一些事情。首先，在克隆行之前（即在點擊處理程序內）分離日期選擇器字段。然後在克隆行之後重新初始化它們。現在你只是在頁面第一次加載時初始化ready（）處理程序中的第一個，但是新克隆的行也需要初始化。

我認爲日期選擇器對象需要在克隆之前分離，因爲否則當您嘗試初始化新克隆的行時，插件認爲它已經被初始化並中止。另外，如果不先將它們分開，您有時最終會在日期選擇器輸入字段旁邊顯示多個按鈕或圖像。

$(document).ready(function() { 
    $('#addNew').click(function() { 
     // Detach all datepickers before cloning. 
     $('.datepicker').datepicker('destroy'); 

     var tbody = $('#entries tbody'); 
     var rows = tbody.find('tr').length; 
     var newRow = tbody.find('tr:first').clone(true).appendTo(tbody); 
     newRow.find(':input').val('').each(function() { 
      var id = this.id 
      if (id) { 
        this.id = this.id.split('_')[0] + '_' + rows; 
      } 
     }) 

     // Reattach all datepickers after cloning. 
     $('.datepicker').datepicker({ 
       autoSize: true, 
       changeMonth: true, 
       changeYear: true, 
       gotoCurrent: true, 
       showOn: 'both', 
       buttonImage: '@Url.Content("~/Content/calendar.png")', 
       buttonText: 'Choose Treatment Date', 
       NextText: 'Next', 
       prevText: 'Previous', 
       showButtonPanel: true 
     }); 
    }); 

    // Initial datepicker setup on page load. 
    $('.datepicker').datepicker({ 
      autoSize: true, 
      changeMonth: true, 
      changeYear: true, 
      gotoCurrent: true, 
      showOn: 'both', 
      buttonImage: '@Url.Content("~/Content/calendar.png")', 
      buttonText: 'Choose Treatment Date', 
      NextText: 'Next', 
      prevText: 'Previous', 
      showButtonPanel: true 
    }); 
});