Bind event to a div appearing

Can I create 开发者_StackOverflow中文版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!

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.

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
    });
   }    
 });

You could use live() method:

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