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++; 

      });