1

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

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

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

el.innerHTML = save;

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

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

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

谢谢。

4

3 回答 3

5

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

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

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

// later
$(el).empty().append(save);
于 2012-10-03T16:51:19.407 回答
3

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

它的作用与保留所有关联的 jquery 元素数据相同，.remove但会保留所有关联的 jquery 元素数据——这将包括使用 jquery 添加的任何事件侦听器，尽管您将丢失任何附加的“常规 dom 事件”。

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

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

//… wait for something to finish, then reattach

stored.appendTo('#outer');
于 2012-10-03T17:01:02.010 回答
1

您可以将事件委托给您的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+
于 2012-10-03T16:49:09.390 回答