Is is possible to determine when an element has been rendered using JavaScript?

Question

Is there a jQuery equivalent to do the following:

$(document).ready(function() {

for an element:

$(a).ready(function() {

I have content in an updatepanel and I am calling jQuery UI's .button() on some anchor elements. After the updatepanel refreshed, the anchors are rerendered and lose the UI styling.

I already know how to detect the end of an ajax request using .NET AJAX's add_endrequest(handler), but was hoping for a neater solution using jQuery.delegate.

e.g.

$('body').delegate('#mybutton', 'load', (function(){  //this doesnt work... }

Answer 1

If I understand your requirement correctly, one way to do this is with the Live Query plug-in.

Live Query ... has the ability to fire a function (callback) when it matches a new element and another function (callback) for when an element is no longer matched

For example:

$('#someRegion a').livequery( function(){ 
  do_something();
});

---

Update: Since the DOM changes are not running through jQuery, unfortunately livequery doesn't see them. I mulled over this issue before and considered a polling-based solution in this answer.

---

Update: Polling is kind of ugly, but if there's really no other alternative, here's a polling-based solution that uses a jQuery "dummy" manipulation to make livequery "see" the change. You'd only want to consider something like this as a last resort -- if there's no option to tie into a callback method.

First, set up livequery watching the container where the updates will occur:

$('div#container').livequery( function(){ 
  $(this).css('color','red'); // do something
});

And then use setInterval(), here wrapped in a convenience function:

function pollUpdate( $el, freq ){
  setInterval( function(){
    $el.toggleClass('dummy');
  }, freq); 
};

So you can have:

$(document).ready( function(){
  pollUpdate( $('div#container'), 500 );
});

Here's a working example. Click the button to add new DOM elements without jQuery, and you'll see they get picked up (eventually) and restyled by livequery. Not pretty, but it does work.