javascript - 如何重用克隆的元素？

Question

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

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

我试过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);