jQuery: Observe an enumerable/selector

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.

check out http://stackoverflow.com/questions/7692730/dom-mutation-event-in-jquery-or-vanilla-javscript/7749629#7749629 — Daniel Mendel, Nov 14 '11 at 15:25

score 2 · Answer 1 · answered Nov 14 '11 at 14:59

2

I think you should add the code that adds the hello attribute to the row in a callback function or something on the statement that actually adds the row to the table.

answered Nov 14 '11 at 14:59

Bas Slagter

9,831
7
47
78

I've updated my question. Unfortunately the code that adds the row is not by me. – chiccodoro Nov 14 '11 at 15:11

Brian Nickel · Accepted Answer · 2011-11-14T15:44:37.343

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

DOM modification events are not widely supported. You could listen for DOMSubtreeModified in Chrome and FF, but not in IE and Opera.
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.

Thanks. I understand your points. Unfortunately the code that adds the row is not by me. I have updated my question accordingly. — chiccodoro, Nov 14 '11 at 15:13
Thank you for the elaborate edit. It is a pity that IE does not support this event... — chiccodoro, Nov 15 '11 at 08:13

jQuery: Observe an enumerable/selector

2 Answers2