JQuery "on appear" event

Question

My application adds some elements to the DOM after $(document).ready has been called. I'm using jQuery 1.9.0

The following example works.

$(document).on("click", "#box-descr", function(evt) {
    console.log("I showed up");
});

However, I want to execute that function when the element appears on screen. I couldn't see any event for this purpose here http://api.jquery.com/category/events/

Basically it's a single page application, so document ready is called only once but elements come in and out of the screen as the user interacts with the UI.

Answer 1

May be you want .ready() function :

$("#box-descr").ready(function(){
   console.log("I showed up");   
});

or if you are fading it in :

$("#box-descr").fadeIn(1000, function(){
   console.log("I showed up");   
});

---

Update: As @Jeff Tian's comment-

You need to delegate event to the either closest static parent or to the document like this:

$(document).on("ready", "#box-descr", function(){
   console.log("I showed up");   
});

Answer 2

Events are nice but because there is no native event for appearance, events require knowing when an item is added so that the event can be manually triggered. You can use polling to test for the appearance of something and do an action when it appears. This works great for content that is added outside your control, such as from user input, ajax, or other programs.

setInterval(function() {
    $('.my-element-class:not(.appeared)')
        .addClass('appeared')
        .each(function() {
            console.log("here I am!")
        });
}, 250);

This will check for the appearance of an element by class name (or any other selector criteria you supply) 4 times each second and run the code when a new item appears. Once an item is seen the .appeared class is added to prevent that instance from being detected again. If you only want to test for one appearance you can simplify thusly and close down the polling after detection.

var testAppearTmr = setInterval(function() {
    if ($('.my-element-class').length) {
        clearInterval(testAppearTmr);
        console.log("here I am!")
    }
}, 250);

The jQuery appear plugin is built around these techniques and has a lot more options, like tests for if the item is in the view area, but if all you want to do is test for a few items being added to the dom the above code is much thriftier than a plugin.

Answer 3

I think that you're asking if you can trigger the event when the targetted element is added to the DOM. Let me know if this isn't what you want.

$(document).on('click', '#box-descr', function(evt) {
    console.log("I showed up");
});

// Later in your code you add the element to the DOM
$('<div />', { id : 'box-descr' }).appendTo('body');

// Then trigger the click event for the added element 
$('#box-descr').trigger('click');

Hope that is what you're looking for

You can shorten this to

$('<div />', { id : 'box-descr' }).appendTo('body').trigger('click');