似乎无法清理脱落的DOM元素 [英] Can't seem to cleanup detached DOM elements
问题描述
我使用的jQuery-UI选项卡和我有当某个标签页已被删除时出现的问题。该选项卡显示为已删除，其内容股利一起，但是当你看看在Chrome DevTools型材堆（一个选项卡已被删除后），你会看到标签里和div元素仍然是present ，但分离。随着时间的推移，反复添加/去除标签会导致这些元件积聚。例如，如果添加了一个选项卡10次，将有10分离的div元素和10超脱里的元素呈现在堆快照了：
I'm using jquery-ui Tabs and I'm having a problem that occurs when a tab has been removed. The tab appears to be removed, along with its content div but when you take a look at the heap in Chrome DevTools Profiles (after a tab has been removed) you'll see that the tab li and div elements are still present, but detached. Over time, the repeated addition/removal of tabs causes these elements to accumulate. For example, if you add a tab 10 times, there will be 10 detached div elements and 10 detached li elements showing up in the heap snapshot:
我有以下几点看法：
TabLabel = Marionette.ItemView.extend({
template: "#tab-label",
tagName: "li",
events: {
"click .ui-icon-close": "closeTab"
},
closeTab: function(e) {
this.$el.contents().remove();
this.model.collection.remove(this.model);
$("#main-container").tabs("refresh");
this.close();
}
});
TabContainer = Marionette.ItemView.extend({
template: "#tab-container",
tagName: "div",
onBeforeRender: function() {
this.$el.attr("id", "div-" + this.id);
},
onClose: function() {
// This removes the region that contains the container
App.layout.removeRegion(this.containerRegion);
}
});
TabLabels = Marionette.CollectionView.extend({
tagName: "ul"
});
TabContainers = Marionette.CollectionView.extend({
tagName: "div"
});
的意见被实例化，像这样：
The views are instantiated like so:
tabs = new TabsCollection(); // Create a new collection instance
var tabLabelView = new TabLabels({
itemView: TabLabel,
collection: tabs
});
var tabContainerView = new TabContainers({
itemView: TabContainer,
collection: tabs
});
正如你可以看到，这两个意见指的是同一个集合;集合中的每个型号可以说是重新present一个标签（它只是恰巧，该模型包含了必要的信息，以满足的jQuery的UI选项卡）。该意见通过Marionette.Layout ... pretty标准显示在一个区域。添加选项卡单击该选项卡容器中的链接来完成;这样做只是增加了另一种模式的集合，然后主容器，这使得新标签出现在调用标签（刷新）。删除选项卡通过单击该选项卡右上角的角落X图标来完成。
As you can see, the views both refer to the same collection; each model in the collection can be said to represent a single tab (it just so happens that the model contains the necessary information to satisfy jquery-ui tabs). The views are shown in a region via Marionette.Layout... pretty standard. Adding a tab is accomplished by clicking a link in the tab container; all this does is adds another model to the collection and then calls tabs("refresh") on the main container, which makes the new tab appear. Removing a tab is accomplished by clicking an "X" icon in the upper right-hand corner of the tab.
我花了很多时间试图追查此泄漏，我想不通，如果是在我的code的一个问题（我的看法关闭/模型的方式/等等吧？）或者如果它在jQuery的-UI选项卡插件有问题。
I've spent a lot of time trying to track down this leak and I can't figure out if it's a problem in my code (the way I'm closing views/models/etc. perhaps?) or if it's a problem in the jquery-ui tabs plugin.
的思考？在此先感谢！
更新＃1 按照要求，这里是一个的jsfiddle 证明了问题 - 只要关闭标签，你会看到分离的元素被留了下来。
Update #1 As requested, here is a jsfiddle demonstrating the problem -- just close the tabs and you'll see that detached elements are left behind.
此外，截图：
更新＃2 这似乎是在插件的jQuery的-UI选项卡泄漏。在发生了jQuery的UI网站上的部件示范相同的行为。我加了一些标签，然后将它们关闭了，果然，他们坚持：
Update #2 This appears to be a leak in the jquery-ui tabs widget. The same behavior occurs in the widget demonstration on the jquery-ui website. I added a few tabs and then closed them out and sure enough, they persisted:
我已经用最新的（在写这篇文章的时候）jQuery UI的版本（1.10.3）和previous版本（1.10.2）测试这一点。
I've tested this with the latest (at the time of this writing) version of jQuery UI (1.10.3) and the previous version (1.10.2).
推荐答案
所以，我最终以做两件事情解决了这个问题（前一段时间）：
So I eventually fixed this problem (quite some time ago) by doing two things:
- 在有利于引导的开沟jQueryUI的
-
更改closeTab功能（参见原来的jsfiddle）于以下内容：
- Ditching jQueryUI in favor of Bootstrap
Changing the closeTab function (see the original jsFiddle) to the following:
closeTab: function (e) {
e.stopPropagation();
e.preventDefault();
this.model.collection.remove(this.model);
this.close();
}
在该片段中，stopPropagation和preventDefault真的什么停止从其余分离这个元素（和积累在随后的增加/删除）在DOM。总结：这个问题是由它触发后不调用事件对象的stopPropagation / preventDefault创建。我已经更新了的jsfiddle 以便正确移除标签元素和对子孙后代的，这里有一个屏幕截图结果：
In that snippet, stopPropagation and preventDefault are really what stopped this element from remaining detached (and accumulating on subsequent adds/removes) in the DOM. To summarize: this problem was created by not calling stopPropagation/preventDefault on the event object after it was triggered. I've updated the jsFiddle so that it correctly removes the tab elements and for posterity, here's a screenshot of the result:
如你所见，没有任何标签元素的剩余点击X关闭后，他们分开。唯一的独立元素都是来自的jsfiddle界面的人。
As you can see, none of the tab elements are remaining detached after clicking the "X" to close them. The only detached elements are the ones that come from jsFiddle's interface.
这篇关于似乎无法清理脱落的DOM元素的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
