Question

好的，第一个问题那么温柔:) 我正在使用一些使用时间选择器的HTML / PHP表单。我有几个DIV，我改变显示模式（阻止/无）隐藏和取消隐藏。一些Div使用jQuery时间选择器，我发现了一些谷歌搜索。

以下是时间选择器工作的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来获取＆＃34;恢复＆＃34;的内容。 div，用其他数据替换占位符（9HC7kXRXpz＆amp; 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);
}

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

Answer 2

我相信，因为你要更换html，你需要调用你的ready函数再次激活datepickers（我的意思是这些行）：

$('#schedstartpicker').timepicker();
$('#schedendpicker').timepicker();

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

在创建此plunkr时，我发现您已在输入中设置了禁用状态，这使得即使在替换html后调用.timepicker()之后它们也无效。

Div内的TimePicker内容已重新加载

2 个答案: