How to reference dynamically added element after DOM loaded without a need to act on any events?

Question

I know there is .on and .live (deprecated) available from JQuery, but those assume you want to attach event handlers to one ore more events of the dynamically added element which I don't. I just need to reference it so I can access some of the attributes of it.

And to be more specific, there are multiple dynamic elements like this all with class="cluster" set and each with a different value for the: title attribute, top attribute, and left attribute.

None of these jquery options work:

var allClusters = $('.cluster');
var allClusters2 = $('#map').children('.cluster');
var allClusters3 = $('#map').find('.cluster');

Again, I don't want to attach any event handlers so .on doesn't seem like the right solution even if I were to hijack it, add a bogus event, a doNothing handler, and then just reference my attributes.
There's got to be a better solution. Any ideas?

UPDATE:
I mis-stated the title as I meant to say that the elements were dynamically added to the DOM, but not through JQuery. Title updated.

Your question is REALLY confusing-- there is no reason that you should have to attach any kind of event handler just to select an element (or multiple elements). At minimum, you need to explain what you mean by "None of these jquery options work" — Colleen, Jan 26 '13 at 00:22
all of the options you've shown will work, assuming the elements exist when you use them (and in case of `children` they are direct children of `#map`). Would help if you show how you are using the code. Also assumes you are using `document.ready` if elements are in intial page load — charlietfl, Jan 26 '13 at 00:26
When you dynamically create stuff with jQuery, you can also access its attributes. By default. Where's the problem? Do you want to select all of them? `$('.cluster').each()` ? — Smuuf, Jan 26 '13 at 00:27

score 2 · Accepted Answer · answered Jan 29 '13 at 19:06

I figured it out. The elements weren't showing up because the DOM hadn't been updated yet.

I'm working with Google Maps and MarkerClustererPlus to give some more context, and when I add the map markers using markerclustererplus, they weren't available in the javascript code following the add.

Adding a google maps event listener to my google map fixed the problem:

google.maps.event.addListener(myMarkerClusterer, 'clusteringend', function () {
    // access newly added DOM elements here
});

Once I add that listener, all the above JQuery selectors and/or methods work just fine:

var allClusters = $('.cluster');
var allClusters3 = $('#map').find('.cluster');

Although this one didn't, but that's because it only finds direct decendants of parent:

var allClusters2 = $('#map').children('.cluster');

score 1 · Answer 2 · answered Jan 26 '13 at 00:28

Do what you need to do in the ajax callback:

$.ajax(...).done(function (html) {
   //append here
   allClusters = $('.cluster');
});

If you want them to be separate, you can always bind handlers after the fact, or use $.when:

jqxhr = $.ajax(...).done(function (html) { /* append html */ });
jqxhr.done(function () { allClusters = $('.cluster') });
$.when(jqxhr).done(function () { /* you get it */ });

If these are being appended without ajax changes, then just move the cluster-finding code to wherever the DOM changes take place.

If that's not an option, then I guess you would just have to check on an interval.

How to reference dynamically added element after DOM loaded without a need to act on any events?

2 Answers2