Question

Using $("#myTable tr").live("click", someCallback); (although now deprecated) it is fairly simple to subscribe to the click event for newly added table rows.

I would be interested in a way which doesn’t only support events but any jQuery commands, something like:

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

which would add the hello=”world” attribute to any newly added table rows. Is there any such thing in jQuery?

Update: Please note. I want to subscribe to the event of an element being added. I do not control the code which adds it. Take dataTables as a example: The dataTables plug-in creates the table rows.

Answer 1

I would say there are two reasons why this doesn’t really exist.

1. DOM modification events are not widely supported. You could listen for DOMSubtreeModified in Chrome and FF, but not in IE and Opera.
2. Checking every DOM event against a selector would be very costly. .live/.delegate is already pretty inefficient of a strategy.

To help picture 2, imagine that 1 isn’t a problem and we can capture any time an element is added to the DOM. When this happens, we need to evaluate the new element and its children against "#myTable tr". This will significantly increase the amount of non-native code executing with every DOM change in scope, really slowing things down.

The best strategy is to add your desired jQuery changes to the code that would be inserting the <tr>

UPDATE If you have no choice and only have to support Chrome and FF, there is one solution I can think of. Obviously, it will not be fast and you can improve your performance through specificity:

$.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');});

See an example here: http://jsfiddle.net/vCZHQ/

You could theoretically check if the table has changed in IE by doing a timeout:

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

That said, this will have a slight delay and really drain a laptop’s battery.