Bind event to a div appearing

Question

Can I create an event so I can execute some javascript whenever an element with a specific ID becomes visible or appears on the page?

The element comes from a remote resource (so isn't in MY html code but appears on page load) and I'd like some code to run when it appears (and only if it appears, it may not appear every load).

Thanks!

Answer 1

If a selector doesn't find a match, it just won't run, so just having code like this is fine:

 $("#elementID").each(function() {
   //do something
 });

Just run that statement in whatever code loads the ID, or alternatively rig it up in the ajax handler if that's how it's getting loaded like this:

$.ajaxSetup({
   complete: function() {
    $("#elementID").each(function() {
     //do something
    });
   }    
 });

Answer 2

You could use live() method:

$('div_id_or_class').live('click', function(){
 // ................
});

Answer 3

You can make a function that will check every X milliseconds if such element appeared on the page (a plain Javascript solution):

(​function ()​ {
    var intervalId = window.setInterval(function() {
        if (null != document.getElementById('myDivId')) {
            // the div appeared on the page
            // ... do your stuff here:
            alert('its here!');

            // optionally stop checking (obviously it's there already 
            // unless you decide to remove it)
            window.clearInterval(intervalId);
        };
    }, 100); // perform check every 100 milliseconds
}​)()​;

There is the possibility that the DIV is there all the time, only not visible. So your checking function should be a little different:

var el = document.getElementById('myDivId');
if (null != el && (el.offsetWidth > 0 || el.offsetHeight > 0)) {

Basically (el.offsetWidth > 0 || el.offsetHeight > 0) indicates that element is not hidden by its or its parents' CSS properties.