Question

使用$("#myTable tr").live("click", someCallback);（虽然现已弃用），为新添加的表行订阅click事件非常简单。

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

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

将为任何新添加的表行添加hello =“world”属性。在jQuery中有没有这样的东西？

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

Answer 1

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

Answer 2

我想说有两个理由说明为什么它不存在。

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);

那就是说，这会有一点延迟，真的会耗尽笔记本电脑的电量。

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

2 个答案: