document on appear not working

Question

Im loading content though ajax, all works.

But iv got the appear.js file and the animate.css file

The following 2 wont work and i dont know why. Does anyone know why this is not working?

$(document).on('appear', '.animated', function(){

    var dis = $(this);
    var animation = dis.data('animation');
    var delay = dis.data('delay');

    if(delay){
        setTimeout(function(){
            dis.addClass(animation);
        }, delay);
    } else {
        dis.addClass(animation);
    }
});

and this

$('.animated').appear(function(){
    var dis = $(this);
    var animation = dis.data('animation');
    var delay = dis.data('delay');

    if(delay){
        setTimeout(function(){
            dis.addClass(animation);
        }, delay);
    } else {
        dis.addClass(animation);
    }
});

Answer 1

The appear event won't be triggered on an element until after you've initialized the plugin with $(element).appear(). Since you're loading elements dynamically with AJAX, you need to initialize the plugin on the new elements. So your callback needs to be something like:

.done(function(response) {
    $("#someDiv").html(response);
    $("#someDiv").find(".animated").appear().on("appear", function() {
        ...
    });
});