将pickadate jquery插件应用于动态输入字段

Question

我正在动态创建一个输入字段并尝试将pickadate jquery插件应用到它，但它不起作用。

我有一个按钮，当用户点击它时触发一个事件，然后生成一个新的字段，等等。

我有以下代码来动态创建输入字段。

var x = InputsWrapper.length; //initlal text box count 
$(AddButton).click(function (e) //on add input button click 
{ 
     if(x <= MaxInputs) //max input box allowed 
     { 
      FieldCount++; //text box added increment 
      //add input box 
      $(InputsWrapper).append('<div><input type="text"><a href="#" class="removeclass">&times;</a><div id="align_new"><ul><li><span>Start : </span><input type="text" class="datepicker" id="list'+FieldCount+'_start_date"></li><li><span>End : </span><input type="text" class="datepicker" id="list'+FieldCount+'_end_date"></li></ul></div></div>'); 
      x++; 
     } 

return false; 
}); 

每个字段都有一个不同的ID：从list2_start_date和list2_end_date开始和每次用户添加一个字段的数量增加。

在我的静态输入字段上，插件工作得很好，但它不会将插件应用于动态创建的字段。

我必须处理事件的功能是：

$(document).ready(function() { 

    $('#list1_start_date').pickadate() 
    $('#list1_end_date').pickadate() 

    $('#list2_start_date').pickadate() 
    $('#list2_end_date').pickadate() 

    $('#list3_start_date').pickadate() 
    $('#list3_end_date').pickadate() 

    $('#list4_start_date').pickadate() 
    $('#list4_end_date').pickadate() 

    $('#list5_start_date').pickadate() 
    $('#list5_end_date').pickadate() 

}); 

和HTML：

<div id="InputsWrapper"> 
     <span class="new_span">Field :</span> 
     <input type="text"> 
     <span class="new_span" style="width:186px;"></span> 
     <div id="align_new"> 
      <ul> 
       <li> 
        <span>Start :</span> 
        <input style="width:88px;" type="text" class="datepicker" id="list1_start_date"> 
       </li> 
       <li> 
        <span>End :</span> 
        <input style="width:88px;" type="text" class="datepicker" id="list1_end_date"> 
       </li> 
      </ul> 
     </div> 
    </div> 

Answer 1

解决办法：

只需添加.find（）追加后：

$(InputsWrapper).append('<code_here>').find('.datepicker').pickadate(); 

代码得到：

$(InputsWrapper).append('<div><input type="text"><a href="#" class="removeclass">&times;</a><div id="align_new"><ul><li><span>Start : </span><input type="text" class="datepicker" id="list'+FieldCount+'_start_date"></li><li><span>End : </span><input type="text" class="datepicker" id="list'+FieldCount+'_end_date"></li></ul></div></div>').find('.datepicker').pickadate();