Question

jQuery腳本

  var current = 1; 
      $('#addWorkingHistory').live('click', function() { 
       var strAdd = '<tr id="workingHistory' +current+ '"></tr>'; 
       strAdd += '<td><div class="input-append date success"><div class="input text"><input name="data[WorkingHistory]['+current+'][date_from]" class="form-control" type="text" id="WorkingHistory'+current+'DateFrom"/></div></div></td>'; 
       strAdd += '<td><div class="input-append date success"><div class="input text"><input name="data[WorkingHistory]['+current+'][date_to]" class="form-control" type="text" id="WorkingHistory'+current+'DateTo"/></div></div></td>'; 
       strAdd += '<td><div class="input text"><input name="data[WorkingHistory]['+current+'][company]" class="form-control" type="text" id="WorkingHistory'+current+'Company"/></div></td>'; 
       strAdd += '<td><div class="input text"><input name="data[WorkingHistory]['+current+'][position]" class="form-control" type="text" id="WorkingHistory'+current+'Position"/></div></td>'; 
       strAdd += '<td><div class="input text"><input name="data[WorkingHistory]['+current+'][salary]" class="form-control" type="text" id="WorkingHistory'+current+'Salary"/></div></td>'; 
       strAdd += '</tr>'; 
       $('body').find('#workingHistoryBody').append(strAdd); 
       $('.input-append.date').each(function() { 
        $(this).datepicker({ 
         autoclose: true, 
         todayHighlight: true 
        }); 
       }); 
       current++; 
      }); 

部分表

       <tbody id="workingHistoryBody"> 
            <tr id="workingHistory0"> 
             <td> 
              <div class="input-append date success"> 
               <?= $this->Form->input('WorkingHistory.0.date_from', array('class' => 'form-control', 'label' => false)); ?> 
               <span class="add-on"><span class="arrow"></span><i class="fa fa-th"></i></span> 
              </div> 
             </td> 
             <td> 
              <div class="input-append date success"> 
               <?= $this->Form->input('WorkingHistory.0.date_to', array('class' => 'form-control', 'label' => false)); ?> 
               <span class="add-on"><span class="arrow"></span><i class="fa fa-th"></i></span> 
              </div> 
             </td> 
             <td><?= $this->Form->input('WorkingHistory.0.company', array('class' => 'form-control', 'label' => false)); ?></td> 
             <td><?= $this->Form->input('WorkingHistory.0.position', array('class' => 'form-control', 'label' => false)); ?></td> 
             <td><?= $this->Form->input('WorkingHistory.0.salary', array('class' => 'form-control', 'label' => false)); ?></td> 
            </tr> 
           </tbody> 

我已經有點最近感到受屈試圖讓jQuery UI的日期選擇器工作的正確的動態添加字段創建更多的訂單項。它對已經在頁面上顯示的項目非常有效。任何幫助表示讚賞。

Answer 1

我編輯了你的jQuery代碼。試試這個：

var current = 1; 
      $('#addWorkingHistory').live('click', function() { 
       var strAdd = '<tr id="workingHistory' +current+ '"></tr>'; 
       strAdd += '<td><div class="input-append date success"><div class="input text"><input name="data[WorkingHistory]['+current+'][date_from]" class="form-control" type="text" id="WorkingHistory'+current+'DateFrom"/></div></div></td>'; 
       strAdd += '<td><div class="input-append date success"><div class="input text"><input name="data[WorkingHistory]['+current+'][date_to]" class="form-control" type="text" id="WorkingHistory'+current+'DateTo"/></div></div></td>'; 
       strAdd += '<td><div class="input text"><input name="data[WorkingHistory]['+current+'][company]" class="form-control" type="text" id="WorkingHistory'+current+'Company"/></div></td>'; 
       strAdd += '<td><div class="input text"><input name="data[WorkingHistory]['+current+'][position]" class="form-control" type="text" id="WorkingHistory'+current+'Position"/></div></td>'; 
       strAdd += '<td><div class="input text"><input name="data[WorkingHistory]['+current+'][salary]" class="form-control" type="text" id="WorkingHistory'+current+'Salary"/></div></td>'; 
       strAdd += '</tr>'; 
       $('body').find('#workingHistoryBody').append(strAdd); 

       $('.input-append.date').each(function() { 
       $(document).ready(function(){//added this line 
        $(this).datepicker({ 
         autoclose: true, 
         todayHighlight: true 
        }); 
       });//and added enclosing brackets 
       }); 
       current++; 

      });