javascript - 当 DOM 树发生变化时更新事件处理程序

Question

这个问题已经有答案了:

已关闭 11 年前。

Possible Duplicate:
DOM Mutation event in JQuery or vanilla Javascript

我正在使用带有动态生成模板的backbone.js，并且正在使用几个jQuery UI插件，它们附加到一些类，例如slimScroll :

$(function(){
    $('.scroll').slimScroll({
        height: $(window).height();
    });

    $('.stars').changeSelectBoxToRatingStars();
    // ...
});

当我更新 DOM 树(通过渲染模板、加载新内容等)并且添加新元素时，需要刷新这些绑定(bind)。

存在 DOM 树突变事件，现已弃用且不受 IE 支持(请参阅 DOM mutation events replacement )。我也见过.live()在 jQuery 中，这使得可以更新 .click()类似的事件，但它无法监视 DOM 的更改。对于监控每个浏览器中 DOM 树更改的有效且符合标准的方式有什么建议吗？

Answer 1

我真的不建议使用.live()。

.live() 将事件关联到最高的 DOM 元素(主要是文档)。确实，如果您在某些特定选择器上使用它，然后动态添加一些新元素，这也将具有先前关联的事件，但是每次您启动该事件时，它都必须向上移动到 DOM 中的文档元素树来处理它。

在一个巨大的 DOM 树中思考一下。单击 td 元素，它会在整个 DOM 中运行，直到文档元素。真是太恶心了。

处理这种情况的最佳方法是使用.delegate()。它的工作方式与 .live() 方法类似，但不会将事件启动到文档元素中的处理程序，而是启动到您选择的上部元素中。

像这样:

$(UpperElement).delegate(SelectorsOfClickableElements, eventsToDelegate, callbackFunction); 

这样，当您单击 DOM 中的新元素时，事件的处理程序将是您选择的上层元素，而不是文档元素。相信我，这比 .live() 快得多。

.on() 从 jQuery 1.7 开始工作。我对此有点过时了，但也许你可以找到更好的。无论如何，.delegate() 应该可以工作。

对不起我的英语。