title: Adding a jquery timepicker to dynamically added input fields in a table using jquery
body: <p>i have a code for dynamically generated input fields in a table using clone() method of jquery.the code is as follows</p>
  
  <pre><code>$(document).ready(function(){
      $("#myTable tr:last input").live("click",function(){
      $(this).parent().parent().clone().appendTo("#myTable");
      });
  
      });
  </code></pre>
  
  <p>my html code for the table is as follows</p>
  
  <pre><code>&lt;table id="myTable" class="timingtable" border="1" cellpadding="0" cellspacing="0" align="left" style="width:100%; height:170px;"&gt;
    &lt;tr&gt;
      &lt;th&gt;Start time&lt;/th&gt;
      &lt;th&gt;End time&lt;/th&gt;
      &lt;th&gt;Family&lt;/th&gt;
    &lt;/tr&gt;
    &lt;tr&gt;
      &lt;td&gt;&lt;input type="date" name="start" id="element1" class="datefield" value=""&gt;&lt;/td&gt;
      &lt;td&gt;&lt;input type="date" name="end" id="element2" class="datefield" value="" &gt;&lt;/td&gt;
      &lt;td&gt;&lt;input type="text"/&gt;&lt;/td&gt;
    &lt;/tr&gt;
    &lt;tr&gt;
     &lt;td&gt;&lt;input type="date" name="start" id="element3" class="datefield" value=""&gt;&lt;/td&gt;
      &lt;td&gt;&lt;input type="date" name="end" id="element4" class="datefield" value="" &gt;&lt;/td&gt;
      &lt;td&gt;&lt;input type="text"/&gt;&lt;/td&gt;
    &lt;/tr&gt;
  &lt;tr&gt;
      &lt;td&gt;&lt;input type="date" name="start" id="element5" class="datefield" value=""&gt;&lt;/td&gt;
      &lt;td&gt;&lt;input type="date" name="end" id="element6" class="datefield" value="" &gt;&lt;/td&gt;
      &lt;td&gt;&lt;input type="text"/&gt;&lt;/td&gt;
    &lt;/tr&gt;
  &lt;tr&gt;
      &lt;td&gt;&lt;input type="date" name="start" id="element7" class="datefield" value=""&gt;&lt;/td&gt;
      &lt;td&gt;&lt;input type="date" name="end" id="element8" class="datefield" value="" &gt;&lt;/td&gt;
      &lt;td&gt;&lt;input type="text"/&gt;&lt;/td&gt;
    &lt;/tr&gt;
  &lt;tr&gt;
     &lt;td&gt;&lt;input type="date" name="start" id="element9" class="datefield" value=""&gt;&lt;/td&gt;
      &lt;td&gt;&lt;input type="date" name="end" id="element10" class="datefield" value="" &gt;&lt;/td&gt;
      &lt;td&gt;&lt;input type="text"/&gt;&lt;/td&gt;
    &lt;/tr&gt;
  &lt;tr&gt;
     &lt;td&gt;&lt;input type="date" name="start" id="element11" class="datefield" value=""  /&gt;&lt;/td&gt;
      &lt;td&gt;&lt;input type="date" name="start" id="element12" class="datefield" value=""/&gt;&lt;/td&gt;
      &lt;td&gt;&lt;input type="text"/&gt;&lt;/td&gt;
    &lt;/tr&gt;
  &lt;/table&gt;
  </code></pre>
  
  <p>i have added timepicker to the input fields as follows</p>
  
  <pre><code>&lt;script type="text/javascript"&gt;
          $(function () {
              $('.datefield').timepicker();
          });
  </code></pre>
  
  <p>datefield is the class name given to static input fields.</p>
  
  <p>i am getting timepicker to static fields but i am not getting timepicker to the dynamically generated input fields.</p>
  
  <p>what i have to do for getting timepicker to the dynamically generated fields also.please provide a solution for this problem.</p>
  
  <p>thanks in advance....... </p>