Обработайте добавление нового элемента с помощью jQuery

Question

на странице есть список статей. Нажав кнопку «больше», вы загрузите больше статей через AJAX

Мне нужно, чтобы новые добавленные статьи отображались плавно.

Я могу сделать это с помощью метода jQuery.fadeIn ().

Проблема в том, как обработать такое событие, когда новые элементы были добавлены в рассматриваемый элемент jQuery.

Я не хочу вызывать пользовательский метод JavaScript на сервере. Серверная сторона должна быть слаба в отношении любых стилевых функций.

Итак, код должен быть чистым на стороне сервера - он должен просто добавлять новые элементы, используя метод jQuery.append ().

На стороне клиента должно быть так:

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

"elementAdded" - это своего рода метод, который я ищу.

Как это сделать?

-

Заранее спасибо.

Answer 1

Ваш вопрос касается события elementAdded, которое лучше назвать событием dommodified, ИМО. Они не существуют в Javascript, хотя я думаю, что jQuery должен имитировать их. Это не сложно сделать в теории:

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

После этого вы можете захватывать модификации с помощью append(), связывая событие contentappended:

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

Answer 2

Сервер не вызывает append, весь javascript выполняется на клиенте. Просто вызовите jQuery.fadeIn () в точке, где вы добавляете новые элементы.