Добавление jquery time picker в динамически добавленные строки в таблице

Question

Привет, я создал таблицу на моей странице, в которой я использовал функцию timepicker для входных элементов и используя следующую функцию. Я добавляю новую строку в свою таблицу всякий раз, когда я дойду до последней строки в таблице:

<script type="text/javascript"> 
    $(document).ready(function(){ 
    $("#myTable tr:last input").live("click",function(){ 
    $(this).parent().parent().clone().appendTo("#myTable"); 
    }); 
    }); 
    </script> 

Это прекрасно работает, и я добавил JQuery timepicker в моей таблице как:

<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/darkness/jquery-ui.css" rel="stylesheet" type="text/css"/> 
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script> 
    <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script> 
<link href="../css/jquery.ui.timepicker.css" rel="stylesheet" /> 
<script src="../js/jquery.ui.timepicker.js"></script> 
    <script> 
    jQuery(function($){ 
    $('#element1').timepicker(); 
    $('#element2').timepicker(); 
    $('#element3').timepicker(); 
    $('#element4').timepicker(); 
}); 

и мой стол на странице как:

<table id="myTable" class="timingtable" border="1" cellpadding="0" cellspacing="0" align="left" style="width:100%; height:170px;"> 
    <tr> 
    <th>Start time</th> 
    <th>End time</th> 
    <th>Family</th> 
    </tr> 
    <tr> 
    <td><input type="text" name="start" id="element1" value=""></td> 
    <td><input type="text" name="end" id="element2" value="" ></td> 
    <td><input type="text"/></td> 
    </tr> 
    <tr> 
    <td><input type="text" name="start" id="element3" value=""></td> 
    <td><input type="text" name="end" id="element4" value="" ></td> 
    <td><input type="text"/></td> 
    </tr> 
</table> 

Здесь мне нужно добавить функциональность JQuery Timepicker для вновь добавленных строк в моей таблице динамически, как я могу это сделать? любая помощь очень ценится .... спасибо заранее ....

Answer 1

Установите поля, чтобы иметь класс 'datefield' (или даже лучше, начните использовать тип ввода 'date'), а затем выполните :

$(document).on("load", ".datefield", function(e){ 
    $(this).timepicker(); 
});