jQuery：观察一个可枚举/选择器答案

【问题标题】：jQuery: Observe an enumerable/selectorjQuery：观察一个可枚举/选择器
【发布时间】：2011-11-14 14:49:25
【问题描述】：

使用$("#myTable tr").live("click", someCallback);（虽然现在已弃用）订阅新添加的表格行的点击事件相当简单。

我会对一种不仅支持事件而且支持任何 jQuery 命令的方式感兴趣，例如：

$("myTable tr").live().attr("hello", "world");

这会将 hello="world" 属性添加到任何新添加的表行。 jQuery中有这样的东西吗？

更新：请注意。我想订阅添加元素的事件。我确实不控制添加它的代码。以dataTables为例：dataTables插件创建表格行。

【问题讨论】：

签出stackoverflow.com/questions/7692730/…

标签： jquery

【解决方案1】：

我想说这实际上不存在的原因有两个。

DOM 修改事件未得到广泛支持。您可以在 Chrome 和 FF 中收听 DOMSubtreeModified，但在 IE 和 Opera 中则不行。
根据选择器检查每个 DOM 事件的成本会非常高。 .live/.delegate 已经是非常低效的策略了。

为了帮助图 2，假设 1 不是问题，我们可以捕捉到元素添加到 DOM 的任何时间。发生这种情况时，我们需要根据"#myTable tr" 评估新元素及其子元素。这将显着增加随每个 DOM 范围变化而执行的非本地代码的数量，从而真正减慢速度。

最好的策略是将您想要的 jQuery 更改添加到将插入 <tr> 的代码中

更新如果你别无选择并且只需要支持 Chrome 和 FF，我能想到一个解决方案。显然，它不会很快，你可以通过特异性来提高你的表现：

$.fn.elementInserted = function(pattern, fn) {
    return this.bind('DOMNodeInserted', function(event) {
            if (event.target.nodeType != 1) return;
            $(event.target).filter(pattern).each(fn);
    });
};

/* SLOW */ $(document).elementInserted('#myTable tr', function(){$(this).attr('hello', 'world');});
/* FASTER */ $('#myTable').elementInserted('tr', function(){$(this).attr('hello', 'world');});

在此处查看示例：http://jsfiddle.net/vCZHQ/

理论上你可以通过超时来检查 IE 中的表是否发生了变化：

var oldEls = $('#myTable tr');
setInterval(function() {
    var newEls = $('#myTable tr');
    if(oldEls.length < newEls.length) {
        /* Do code here to figure out who is new and apply changes. */
    }
    oldEls = newEls;
}, 50);

也就是说，这会有一点延迟，并且确实会耗尽笔记本电脑的电池。

【讨论】：

谢谢。我理解你的观点。不幸的是，添加行的代码不是我的。我已经相应地更新了我的问题。
感谢您的精心编辑。可惜IE不支持这个事件……

【解决方案2】：

我认为您应该在回调函数中添加将 hello 属性添加到行的代码，或者在实际将行添加到表的语句中添加代码。

【讨论】：

我已经更新了我的问题。不幸的是，添加行的代码不是我写的。