Question

我的页面上有一个Bootstrap模式。基本上，会发生的是用户在页面上选择一些选项，单击一个go按钮，弹出该模式并填充他们开始的作业的实时输出。

作业运行后，我希望用户能够关闭模态，选择更多选项，然后再次运行作业。问题是，我似乎无法摆脱上一份工作的输出。

我尝试了this回答，这是克隆div并使用replaceWith()将内容恢复到原始状态。这适用于前两次（作业运行一次，然后当你启动另一个模态回到它的原始状态），但在此之后的任何时间，模式弹出上一次运行的内容，直到它的文本被覆盖点。

我在开始时有这个，在完成任何事情之前捕获内容：

$(document).ready(function() {
     modalHold = $("#postModal").clone();
});

并且，当模态关闭时运行：

$('#postModal').on('hidden.bs.modal', function (){
     $("#postModal").replaceWith(modalHold.clone()); 
})

我希望replaceWith(modalHold.clone())用原始元素的新克隆替换它，但似乎我仍然在修改原始元素。任何帮助将不胜感激，或者如果有更好的方法，我会很高兴听到它。

Answer 1

Bootstrap使用Modal做了一些javascript魔术，所以我想你不能克隆整个Modal的HTML。作为一种解决方法，您可以尝试仅使用class="modal-body"节点，克隆并替换它。

但事实是另一种方式。您需要实现一个函数，该函数将重置您的输入并在每次隐藏模态时调用它。

var modalDefault = {
  input1: '',
  input2: 'Hello!'
};

var resetModal = function() {
  $('#modalInput1').val(modalDefault.input1);
  $('#modalInput2').val(modalDefault.input2);
}

// ...

$('#postModal').on('hidden.bs.modal', resetModal);

Answer 2

我不确定为什么我没想到这一点，但是dhilt's answer帮助我指明了正确的方向。在某些情况下创建默认值并转回那些默认设置的想法可能会有所帮助，但我在模态中有一些内容（包括工作信息和加载栏），我每次工作时都非常希望显示开始，直到完成并显示输出。

我没有做任何花哨的克隆，而是将内容放入div中，然后抓住了innerHTML：

$(document).ready(function() {
    modalHold = $('#jobOutputHolder').html();
});

当.load ()运行时，它将使用作业的输出更新#jobOutputHolder。然后，隐藏模态：

$('#postModal').on('hidden.bs.modal', function (){
    $('#jobOutputHolder').html(modalHold);
})

使用这种方法，我可以运行一个作业，查看加载屏幕，查看作业输出，关闭模式，并根据需要重复多次，而不会看到以前作业的输出。

如何重用克隆元素？

2 个答案: