javascript - Timepicker 没有显示动态条目的焦点？

Question

我有一个调度程序，允许用户选择时间。使用 Ajax 为每一行添加一个计划时间，在该行中他们可以选择日期、开始时间和结束时间。日期选择器似乎工作但时间选择器没有出现。

我尝试在我的 jquery 中使用document而不是body选择器，但没有用。

$(document).on('focus', ".timepickerInput", function () { $(this).timepicker({ timeFormat: "hh:mm tt", interval: 5, dropdown: true, scrollbar: true }); });

日期选择器：

$('body').on('focus', ".datepickerInput", function () {
                    $(this).datepicker({
                        controlType: "select",

                    });
                });

这是当前时间选择器的代码：

$('body').on('focus', ".timepickerInput", function () {
                    $(this).timepicker({
                        timeFormat: "hh:mm tt",
                        interval: 5,
                        dropdown: true,
                        scrollbar: true
                    });
                }); 

这是添加新行的代码：

$("#addScheduleButton").click(function () {
                    var nextIndex = $(".pendingScheduleRow").length;

                    $.ajax({
                        url: "/Admin/AddScheduleItem",
                        type: 'POST',
                        data: {
                            index: nextIndex
                        },
                        success: function (results) {
                            $("table#scheduleTable tbody").append(results);
                            $("#savePendingButton").show();
                        }
                    });
                });

这是 HTML 表单：

<form asp-action="SetSchedule" asp-controller="Admin" method="post" id="addEventForm">
                <table id="scheduleTable">
                    <thead>
                        <tr>
                            <th>Date</th>
                            <th>Start Time</th>
                            <th>End Time</th>
                            <th></th>
                        </tr>
                    </thead>
                    <tbody></tbody>
                </table>

                <br />
                <button id="addScheduleButton" type="button">Add Schedule Time</button>
                <button id="savePendingButton" type="submit" style="margin-left:1em" hidden>Save</button>
            </form>

我希望时间选择器在动态附加到 html 时为添加的每一行工作。

标签： javascriptjqueryhtml