jQuery:确定DOM已经改变了

时间:2010-06-23 16:10:29

标签: javascript javascript-events jquery

编辑:根据马特的建议改变.ready()调用。

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

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

         ... configure it ...

     });
});

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

对于绑定click事件这样的简单事情,.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();
});

这不太理想。个别页面制作者需要了解在他们的页面中做事情时触发自定义事件的惯例(公认地封装在一些共享的实用程序函数中),并且widget创建者需要依赖页面制作者使用此约定,但最终这不是这是一个很大的问题,因为我们在一个封闭的团队工作,不会在外部发布我们的应用程序。

2 个答案:

答案 0 :(得分:1)

我已经将livequery插件用于此目的。它适用于我,但如果不适合你,你至少可以从源代码中获得它的工作原理。

答案 1 :(得分:0)

您提到已经在探索.live()方法,但您可能还需要考虑查看.delegate()。我仍在审查API以获得更合适的东西 - 但也许只要.live()不足就足够了。