javascript - 附加到剔除已删除 dom 元素的事件监听器导致内存泄漏

Question

我正在使用淘汰赛，它是 foreach 绑定(bind)将表行绑定(bind)到表中。我不会更新 UI 来添加或删除行，这一切都是通过淘汰完成的。我还使用tipped js 库向这些行添加工具提示。问题是我没有引用 typescript 或 typescript d.ts 定义中用于tipped js的行。我用这段丑陋的代码让它工作。

setInterval(function () {
    Tipped.create('.tipped'); // create tooltips and listeners
    $(".tipped").removeClass("tipped"); // don't attach twice
}, 500);

这只会添加事件一次，然后在将来跳过它们。

问题是，尽管当删除一行时，knockout 会删除它自己的绑定(bind)，但tipped 却不会。这会导致内存泄漏，因为页面上不再存在的元素会留下越来越多的事件监听器。它们永远不会被垃圾收集。

解决方案是自定义 foreach 绑定(bind)来添加和删除我的小费吗？

Answer 1

我不知道它是否漂亮，但它可以修复我的泄漏

setInterval(function () {
    Tipped.create('.tipped');
    $(".tipped").bind('destroyed', function () {
        Tipped.remove($(this));
    });
    $(".tipped").removeClass("tipped");
}, 500);

(function ($) {
    $.event.special.destroyed = {
        remove: function (o) {
            if (o.handler) {
                o.handler.apply(this, arguments);
            }
        }
    }
})(jQuery)