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

you can easily track on load for any element in the web page.

$(function(){$("#ele_id").bind("load", function () { alert('hurray!') });})

for more details see this thread : http://stackoverflow.com/questions/1383870/jquery-how-do-you-get-an-image-to-fade-in-on-load

Answer 2

elementReady: a jQuery plugin

Answer 3

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.

Answer 4

Are you are trying to solve the wrong problem? IF it is just style: Try to add instead, css in the header so that the update does not impact the style. Note: Not exactly sure on your selectors based on your question for these examples.

$('head').append('<style type="text/css">body a{margin:0;}</style>'); 

OR

$('<style type="text/css">body a {margin: 0;}</style>').appendTo($('head'));

If you indeed need some event management you should be able to use the delegate using context. see notes here: http://brandonaaron.net/blog/2010/03/4/event-delegation-with-jquery

$('body div').delegate('a', 'change', function(event) {
    // this == a element
    $(this).addClass(class here);
});

or with a chain

$('body').children('div').delegate('a', 'change', function(event) {
    // this == a element
  $(this).addClass(class here);
});

Now for the real answer, since you have access to the event you can add it directly to your page with the pageLoad function; Add this:

function pageLoad(sender, args) 
{ 
   if (args.get_isPartialLoad()) 
   { 
       //jQuery code for partial postbacks can go in here. 
   } 
}