之后如何添加 javascript-datetimepicker？

Question

我使用 jQuery Tabs http://jqueryui.com/tabs/

在自定义一些选项后，用户单击按钮并重新加载选项卡。

 function refresher() { 
        //empty the tab
        $("#tabs-individually").empty();

            //load new stuff
        //put the container for highcharts-chart in the tab
        $("#tabs-individually").append('<table><tr><td align="left"><form id="formrange">from<input type="text" size="20" id="startdate"/>to<input type="text" size="20" id="enddate" /><select id="range" ><option value="second">second</option><option value="minute" selected>minute</option><option value="hour" >hour</option><option value="day" >day</option></select><input id="button" type="button" value="confirm" onclick="redraw()" /></form></td></tr><tr><td><div id="container"></td></tr></div>');      

我的问题是 jQuery datetimepicker 插件。重新加载选项卡后，有 2 个输入字段，应该通过 javascript 获得一个 datetimepicker。最后应该是这样的：

如何转换我的 javascript 代码，以便在标签为空后加载？

    /*
    <script type="text/javascript"> 
     $("#startdate").datetimepicker({  showSecond: true, timeFormat: 'HH:mm:ss', });
     $("#enddate").datetimepicker({  showSecond: true,  timeFormat: 'HH:mm:ss', });
    </script>
    */

Answer 1

您需要在页面刷新后重新初始化输入元素上的 datepicker 小部件。

function refresher() { 
    //empty the tab
    $("#tabs-individually").empty();

    //load new stuff
    //put the container for highcharts-chart in the tab
    var el = $('<table><tr><td align="left"><form id="formrange">from<input type="text" size="20" id="startdate"/>to<input type="text" size="20" id="enddate" /><select id="range" ><option value="second">second</option><option value="minute" selected>minute</option><option value="hour" >hour</option><option value="day" >day</option></select><input id="button" type="button" value="confirm" onclick="redraw()" /></form></td></tr><tr><td><div id="container"></td></tr></div>').appendTo("#tabs-individually");
    $('#startdate, #enddate').datepicker({});
}

Answer 2

您可以使用on 函数，然后删除datetimepicker 行：

$(document).ready(function() {
    $("#tabs-individually").on("load", "#startdate, #enddate", function() {
        $(this).datetimepicker({  showSecond: true,  timeFormat: 'HH:mm:ss', });
    });
}