Question

I’m working with a third-party product. It uses JavaScript (non-JQuery) code on the page to generate DOM elements on the fly.

Is it possible to run a jQuery script whenever this third-party code generates a DOM element matching a given selector?

To explain in another way, I don’t want to try and integrate with that code. I just want to watch for certain elements to be created, which is the cue to run my own custom jQuery.

Answer 1

Barring the DOM mutation events that Reinis mentions, I can think of three options:

1) If you are wanting to simply have event handling on the new elements, you can use jQuery Live

2) You can use setTimeout to periodically inspect the DOM for new elements.

3) If you feel like diving into the third party code (for understanding, not direct modification), you can then provide a functional override that notifies you, explicitly, when their function executes

var oldFunc = thirdParty.theirFunc;
thirdParty.theirFunc = function(){ 
    oldFunc();

    // alert myself of the change.
    myDomChangedFunction();
};

This way you aren’t actually modifying their source directly, just functionally 🙂