javascript - 时间选择器“立即”按钮不起作用

Question

我有一张 table

<table id="tbl1">
    <tr class="Row">
        <td class="TimeCol">
            <input title="" type="text" readonly="readonly" class="FromTime " />
        </td>
        <td class="TimeCol">
            <input title="" type="text" readonly="readonly" class="ToTime " />
        </td>
    </tr>
</table>

我有一个 anchor 标记，我可以在上面向表中添加新行，如下所示

<a href="#" onclick="javascript:return AddRow();">

Js:

$(document).ready(function () {
$('.FromTime, .ToTime').timepicker({
            timeFormat: "H:m:s",
            stepMinute: 01,
            ampm: true
        });
});
    function AddRow() {
        var $ttc = '';

        $ttc = $("#tbl1").find("tr:last");

        var $tr = $ttc.clone();

        // reset fields in the new row
        $tr.find("input[type=text]").val("");
        $tr.find(".FromTime").removeAttr('value');
        $tr.find(".ToTime").removeAttr('value');

        // add cloned row as last row
        $('#tbl1 tr:last').after($tr);


        // re-initialise the cloned timepickers:
        $fromTimepicker = $('#tbl1 tr:last').find('.FromTime,.ToTime');
        $fromTimepicker.removeClass("hasDatepicker");
        $fromTimepicker.timepicker({
            timeFormat: "H:m:s",
            stepMinute: 01,
            ampm: true
        });

        return false;
    }

现在，当添加新行并单击时间选择器的“立即”按钮时，第一行文本框中的时间会更新...问题是什么以及如何解决？

之前点击图像

现在点击图像

更新如果我使用 id 将时间选择器添加到文本框，则不会添加时间选择器

var fromId = $('#tbl1 tr:last').find('.FromTime').attr('id');
$('#'+fromId).removeClass("hasDatepicker");
$('#' + fromId).timepicker({
    timeFormat: "H:m:s",
    stepMinute: 01,
    ampm: true
});

Answer 1

您应该在元素 ID 而不是元素类上初始化时间选择器。当您克隆行以添加新行时，新行与前一行具有相同的类。因为当您单击时间选择器小部件上的“现在”按钮时，时间选择器使用类来选择输入字段并更新它找到的第一个输入字段中的时间，即第一行中的时间字段。

如果您在每个输入元素上使用唯一 ID，timepicker 将更新正确元素中的时间。

编辑:尝试以下更改:

// re-initialise the cloned timepickers:
$('#tbl1 tr:last').find('.FromTime').attr('id', 'new_from').removeClass("hasDatepicker"); 
$('#tbl1 tr:last').find('.ToTime').attr('id', 'new_to').removeClass("hasDatepicker"); 
$('#new_from, #new_to').timepicker({
    timeFormat: "hh:mm tt",
    stepMinute: 01,
    ampm: true
});