之后如何添加javascript-datetimepicker？

Question

我使用jQuery标签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 Addon。重新加载选项卡后，有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', });
    });
}