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.
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 :)
There are the so-called DOM mutation events. I'm not sure how well they're supported across browsers, though, since I still haven't had the chance to use them. They're not even listed in ppk's compatibility tables.
Depending on what browsers you need to support, you may be able to use the DOM mutation events which Reinis refers to.
Here's an online resource for testing your target browser(s): http://www.gtalbot.org/DHTMLSection/DOM2MutationEvents.html
If these events are not supported in your target browsers, the only alternative I can think of is to poll the contents of whatever node would contain the new elements.
Based on the jquery documentation, it sounds like load() can be used on any element, not just window/document type elements. So if you know what the elements will be (the id, the class), you could just have the jquery bind to those selectors with load() and do what it is you need done.
check out jQuery's "live" event bindings, it might help: http://docs.jquery.com/Events/live
Added in jQuery 1.3: Binds a handler to an event (like click) for all current - and future - matched element. Can also bind custom events.
In case an AJAX call has changed your DOM and you you want to use jQuery, have a look at
.ajaxComplete()
source: http://api.jquery.com/ajaxcomplete/ which listens on any ajax-call.
or to handle really any change in DOM tree, use
MutationObserver
https://developer.mozilla.org/en-US/docs/Web/API/MutationObserver
// select the target node
var target = document.getElementById('some-id');
// create an observer instance
var observer = new MutationObserver(function(mutations) {
mutations.forEach(function(mutation) {
console.log(mutation.type);
});
});
// configuration of the observer:
var config = { attributes: true, childList: true, characterData: true };
// pass in the target node, as well as the observer options
observer.observe(target, config);
// later, you can stop observing
observer.disconnect();
and more from the mozilla developer:
