javascript - 确定 DOM 已更改

Question

编辑:根据 Matt 的建议更改 .ready() 调用。

我使用 jQuery 来配置一些像这样的东西:

$(function ()
{
     $('.myThing').each(function() {

         ... configure it ...

     });
});

我的问题是在调用 .ready() 后将新元素添加到 DOM 时。不对这些元素执行配置。

对于像绑定(bind)点击事件这样的简单事情，.live() 就可以完成工作。但是对于更复杂的东西，我还没有找到好的解决方案。

是否有 DOM 更改时的事件？或者更具体地说，当新元素添加到 DOM 时？

已编辑:使用 livequery 的暂定解决方案似乎是:

$(function ()
{
    $.fn.configureIt = function()
    {
        ... configure it ...
    }
});
$('.myThing').livequery(function () {
    $(this).configureIt ()
});

再次编辑:事实证明 livequery 不是解决方案。它经常在 DOM 中搜索添加或删除的元素。在相当快的计算机上，运行中等页面，这很好。在速度较慢的计算机上，页面非常大，有多个实时查询和 IE6，每隔几秒就会有半秒的延迟，页面加载延迟会更长。

我们得出的结论是，制定共享的“共同行为”迎合了我们的懒惰。由于我们的团队有一些普通的 JavaScript 人员和一些几乎没有 JavaScript 的人员，也没有 JavaScript 专家，我们希望为 HTML 标记定义约定，而不是在每个新页面中触及这些行为。事实证明，鉴于我们当时的 JavaScript 知识，这是不可能的。

我们提出的解决方案是，每当我们使用 AJAX 或动态内容创建更改 DOM 时，我们都会发生一个事件:

$('.stuff').load(loadUrl, postData, function() {
    $(this).trigger('contentLoaded');
    // among other stuff
});

然后对于任何小部件类型的东西，我们都依赖于这个约定。

$('*').live('contentLoaded', function() {
    $('.myThing', this).configureIt();
});

这并不理想。各个页面制作者需要了解在页面中执行操作时触发自定义事件的约定(诚然封装在一些共享实用程序函数中)，而小部件制作者需要依赖使用此约定的页面制作者，但最终这不是这是一个很大的问题，因为我们在一个封闭的团队中工作并且不在外部发布我们的应用程序。

Answer 1

我用过 livequery插件就是为了这个目的。它适用于我，但如果它不适用于您的情况，您至少可以从源代码中了解它的工作原理。