javascript - 替换 innerHTML 并返回到保留事件的原始内容

Question

我有一个显示了一些组件的目标 div el。这些组件附加了一些事件(鼠标悬停、单击)。我不控制这些代码和那些事件。他们就在那里。我想在这个 div 中呈现一个小部件。为此，我正在做类似的事情:

var save = el.innerHTML; 
el.innerHTML = "my widget code";

当我的小部件完成其过程时，我想返回到原始内容，所以我这样做:

el.innerHTML = save;

先前保存的组件已正确替换，但附加到它们的事件不再起作用。

我不能隐藏，显示 div。我需要替换 innerHTML 以获得准确的样式和定位。

如果是我，你会怎么做？如果有帮助，我会使用 jQuery。

谢谢。

Answer 1

当您将 DOM 元素序列化回 HTML 时，所有事件处理程序和绑定(bind)数据都会丢失。

如果您有 DOM，请使用它，而不是使用 HTML:

var save = $(el).children().detach();
$(el).html(widgetHTML);

// later
$(el).empty().append(save);