javascript - Div 内的 TimePicker 内容已重新加载

Question

好的，第一个问题，所以要温柔一点:)我正在开发一个使用一些时间选择器的 HTML/PHP 表单。我有几个 DIV，我正在更改显示模式(阻止/无)以隐藏和取消隐藏。一些 Div 使用 jQuery 时间选择器，我通过一些 Google 搜索发现了它。

这是时间选择器工作的 Div 之一:

<div class="Schedule" style="display: none;" id="schedule">
    <br />
    <Strong>Schedule Settings</Strong>
    <br /><br />
            Start Time: <br /><input class="timepicker" type="text" id="schedstartpicker" name="schedstartpicker" size="30" disabled><br /><br />
            End Time: <br /><input class="timepicker" type="text" id="schedendpicker" name="schedendpicker" size="30" disabled><br /><br />
    <br /><br />
    <br />
</div>

稍后使用按钮启用这些输入字段。使用以下方法将它们转换为时间选择器字段

$(document).ready(function() {
    $('#schedstartpicker').timepicker();
    $('#schedendpicker').timepicker();

    $('#starttimepicker').timepicker();
    $('#endtimepicker').timepicker();
});

请注意，这里还有两个额外时间选择器。它们位于不同的 DIV 中。下面是 div 内容的简化版本:

<div class="recovery" id="recovery" style="display: none;">
    <table border=0 style='font-size:small' width=622px>

        <tr>
                        <td>
                                        <b>Start Time</b>
                        </td>

                        <td>
                                        <input type="text" id="starttimepicker" name="starttimepicker" size="30" value="9HC7kXRXpz">
                        </td>
        </tr>

        <tr>
                        <td>
                                        <b>End Time</b>
                        </td>

                        <td>
                                        <input type="text" id="endtimepicker" name="endtimepicker" size="30" value="fSpFW77Xkw">
                        </td>
        </tr>

    </table>
</div>          

现在...问题来了。这两个 DIV 都随页面一起加载。两者一开始都是隐藏的。加载页面后，所有 4 个时间选择器都会工作。

后来，我使用 Javascript 获取“恢复”div 的内容，用其他数据替换占位符(9HC7kXRXpz 和 fSpFW77Xkw)文本的位，然后将修改后的文本放回 DIV 中。

这样做是这样的:

function refill_recovery(data1,data2) {

    var recovery = document.getElementById("recovery").innerHTML;

    var recovery=recovery.replace("9HC7kXRXpz",data1);
    var recovery=recovery.replace("fSpFW77Xkw",data2)

            document.getElementById("recovery").innerHTML = recovery;

}

这一切都运行得很好，我对此很满意。但是，当更新的文本放回 Div 时，时间选择器就会丢失。

我尝试使用 Div 更新后调用的另一个函数，并将它们再次设置为时间选择器，但无法使其工作。添加了窗口警报，这样我就可以确定该函数正在运行。

function settimepickers() {
    $('#starttimepicker').timepicker();
    $('#endtimepicker').timepicker();
    window.alert("TIME PICKERS SHOULD BE SET");
}

我正在调用函数来启用和禁用 Div，如下所示:

onclick="refill_recovery('data1','data2'); toggle_visibility('recovery'); settimepickers();"

有点迷失了，所以任何关于如何将它们重新设置为时间选择器的想法都会很棒。

提前感谢大家。

Answer 1

设置 innerHTML 将删除您拥有的 DOM 并替换它。

相反，使用 DOM 更新这些值:

function refill_recovery(data1, data2)
  $('#starttimepicker').val(data1);
  $('#endtimepicker').val(data2);
}

这将保留所有内容，仅更新值。