CODEWITHSUNDEEP
htmljqueryjquery-events
AntonAL
AntonAL

Reputation: 17410

Handle addition of new element with jQuery

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?

Upvotes: 1

Views: 322

Answers (2)

lonesomeday
lonesomeday

Reputation: 237855

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

Upvotes: 2

GolezTrol
GolezTrol

Reputation: 116110

The server doesn't call append, all javascript is executed on the client. Just call jQuery.fadeIn() at the point where you add the new elements.

Upvotes: 0

Related Questions