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... } ```

Accepted Answer

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.

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

Solution

Problem

Related problems