javascript - 如何使用多个生成的引导时间选择器字段

Question

<table class="table table-bordered right-to-left grade_set_tbl ">
    <tbody>
    <tr>
     <td>
    <input type="text" class="form-control timepicker" id="timepicker1"    name="period_time_end[]">
    </td>
    <td><input type="text" class="form-control timepicker" id="timepicker2"    name="period_time_start[]" >
    </td> 
     <td >
    <i class="fa fa-plus" style="cursor:pointer;" onclick="addit('grade_set_tbl');"></i></td>
    </tr>
    </tbody></table>

---

$('.timepicker').timepicker();
function addit(my_id){
    var rowCount = $('.'+my_id+' tr').length
    $('.'+my_id+' tbody>tr:last').clone(true).insertAfter('.'+my_id+' tbody>tr:last');

    $('.'+my_id+' tbody>tr:last td:last').empty().html('<i style="cursor:pointer;" class="fa fa-remove" onclick="$(this).parent().parent().remove();return false; "></i>');

   }

添加新行时，新行添加了与我想要的最后一行相同的元素，但我的问题是 Timepicker 字段并非在所有情况下都有效。只有第一行

Answer 1

试试这个:-

$('.timepicker').timepicker();
function addit(my_id){
    var rowCount = $('.'+my_id+' tr').length
    $('.'+my_id+' tbody>tr:last').clone(true).insertAfter('.'+my_id+' tbody>tr:last');
    $('.'+my_id+' tbody>tr:last .timepicker').timepicker(); // <-- call timepicker() on new .timepicker
    $('.'+my_id+' tbody>tr:last td:last').empty().html('<i style="cursor:pointer;" class="fa fa-remove" onclick="$(this).parent().parent().remove();return false; "></i>');

   }