CODEWITHSUNDEEP
javascriptjquery
AndrewC
AndrewC

Reputation: 6730

Bind event to a div appearing

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!

Upvotes: 1

Views: 459

Answers (3)

Marko Dumic
Marko Dumic

Reputation: 9888

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.

Upvotes: 1

Sarfraz
Sarfraz

Reputation: 382746

You could use live() method:

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

Upvotes: 1

Nick Craver
Nick Craver

Reputation: 630439

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

Upvotes: 1

Related Questions