In jQuery, how can I monitor a dynamically populated element (AJAX), without basing it on an event?

Question

I have the following markup on page load:

<select name="sel_billing_address"></select>

After page load that select is then populated by some AJAX to be something along the lines of:

<select name="sel_billing_address">
  <option value="1">hi</option>
  <option value="2">there</option>
  <option value="3" selected="selected">sally</option>
</select>

I need to grab the selected option from this list. Normally it's just a simple case of:

jQuery('select[name=sel_billing_address] option:selected');

but because it's loaded dynamically, I need to monitor it using .live() - or by some other means. If I monitor it using live('change') then it works great - but I need the values when the select box might not have been changed.

.live('load') seems like the obvious choice, but that only works when loading the element - the select element itself is loaded on page load, at which point it's empty. I have also tried doing .live('load') on the OPTION rather than the SELECT, but that doesn't seem to be available either.

It's also worth noting that I cannot change the markup, how the page loads elements, and I can't plug into the callback parameter of the script that originally changes the select - everything is external.

Any help is greatly appreciated.

Answer 1

check out the livequery plugin. It has the ability to work the same way as the .live() method but unlike live, isn't limited to just being bound to events

Answer 2

You could look into (Global) Ajax Events. This may give you a way to sneak into the ajax callback that you don't have direct access to.

// Use the Global Ajax Event "ajaxComplete"
$('select[name=sel_billing_address]').bind('ajaxComplete', function () {
    // Check to see if select has any option elements yet
    if ($(this).find('option').length > 0) {
        // Unbind the ajax event
        $(this).unbind('ajaxComplete');

        // Do your stuff
        // Here...
    }
});

If you check out the jquery page I linked to you can see that "ajaxComplete" occurs after any "complete".

EDIT: Yes... this is still using an event, but I think it will resolve your issue.