CODEWITHSUNDEEP
javascriptjquery
Alex Angas
Alex Angas

Reputation: 60027

Running a script based on a dynamically generated DOM element

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.

Upvotes: 1

Views: 1198

Answers (6)

simUser
simUser

Reputation: 840

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:

https://hacks.mozilla.org/2012/05/dom-mutationobserver-reacting-to-dom-changes-without-killing-browser-performance/

Upvotes: 0

user186470
user186470

Reputation:

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.

Upvotes: 0

Matt
Matt

Reputation: 41832

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

Upvotes: 5

jhurshman
jhurshman

Reputation: 6067

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.

Upvotes: 1

Anthony
Anthony

Reputation: 37055

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.

Upvotes: 0

slikts
slikts

Reputation: 8158

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.

Upvotes: 2

Related Questions