Question

A page has a list of articles. Clicking "more" button, more articles will be loaded via AJAX

I need to make newly added articles appearing smoothly.

I can do it with jQuery.fadeIn() method.

The problem is – how to handle such event, when new elements was added to jQuery element in question.

I don’t want to call custom JavaScript method at server. Server side must be weak about any styling features.

So, the code must be clean at server side – it must just add new elements, using jQuery.append() method.

At the client side, it should be like this:

$("#articles").elementAdded(function(newElem){
   newElem.hide();
   newElem.fadeIn(600);
});

elementAdded is a kind of method, I’m looking for.

How to do it?

Answer 1

Your question is about an elementAdded event, which would be better termed a dommodified event, IMO. These don’t exist in Javascript, although I think jQuery should mimic them. This is not hard to do in theory:

(function($, undefined) {
    var _append = $.fn.append;

    $.fn.append = function(newHtml) {
        return this.each(function(i, el){
            var $el = $(el);
            _append.call($el, newHtml);
            $el.trigger('contentappended');
        });
    };
})(jQuery);

You could then capture modifications with append() by binding to the contentappended event:

$('#articles').bind('contentappended', function() {
    $(this).hide().fadeIn(600);
});