javascript - JQuery - 恢复被替换的元素

Question

我有按钮编辑和按钮保存。当我单击 edit 按钮时，它会将我的元素替换为 textbox 或 textarea。如果我单击按钮 保存，它使用了另一个函数，我如何才能将元素恢复到 replaceWith() 之前的状态？

<div class="will-be-turned-into-texbox"></div>

function edit(){
    // Replace above div with texbox
}

function save_edit(){
    // Change back texbox to the original div
}

Answer 1

在replaceWith docs ，有一个提示:

Description: Replace each element in the set of matched elements with the provided new content and return the set of elements that was removed.

(我的重点)

所以...存储返回值，当你想把它放回去时，再次使用 append 或(实际上)replaceWith 把它放回去。

无偿的例子:

var replaced;
$(document).on("click", "#replace", function() {
  // Save what's being replaced
  replaced = $(this).replaceWith('<button id="restore">Restore</button>');
});
$(document).on("click", "#restore", function() {
  // Restore it
  $(this).replaceWith(replaced);
});

<button id="replace">Replace</button>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

请注意委托(delegate)事件处理程序的使用，以避免必须重新连接。