Question

我有一个目标div el ，其中显示了一些组件。这些组件附加了一些事件（鼠标悬停，点击时）。我不控制这些代码既不是那些事件。他们就在那里。我想在这个div中渲染一个小部件。为此我做了类似的事情：

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

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

el.innerHTML = save;

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

我无法隐藏，显示div。我需要替换innerHTML以获得确切的样式和定位。

在我的情况下你会做什么？如果它有帮助，我正在使用jQuery。

感谢。

Answer 1

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

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

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

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

Answer 2

您可能会发现.detach有用 - http://api.jquery.com/detach/

它与.remove的作用相同，但保留所有相关的jquery元素数据 - 包括添加了jquery的任何事件监听器，但是你将丢失任何附加的“常规dom事件”。

你也必须用jQuery重新附加元素：

var stored = $(el).detach();

//… wait for something to finish, then reattach

stored.appendTo('#outer');

Answer 3

您可以将事件委托给el元素，因为它似乎没有变化 - 这些新添加的元素在绑定时不存在

$(el).on('click','yourelementtoattachevent',function(){
       // replace click with your event/events
       // your code goes here
});

假设您正在使用jQuery 1.7+，其他人则使用

$(selector).live();                // jQuery 1.3+
$(document).delegate(selector, events, handler);  // jQuery 1.4.3+
$(document).on(events, selector, handler);        // jQuery 1.7+

替换innerHTML并返回保留事件的原始HTML

3 个答案: