Как на Jquery сделать скрипт подгрузки блока (новости) при скроле вниз?

Question

Leyto @Leyto

JavaScript

Как на Jquery сделать скрипт подгрузки блока (новости) при скроле вниз?

Здравствуйте.
Возникла необходимость сделать скрипт подгрузки блока (новости) при скроле вниз.
Первый рожденный вариант :

$(function () {
    var win = $(window),
        doc = $(document),
        items = $("#items"),
        content = $('#content');

    var preloaderTemplate = '<div id="preloader">';

    var template =  '<div class="item">'+
			    '<div class="main-info">'+
			    '<div class="rating">'+;
                             ........................................
                             ........................................
                            '</div>';

    win.scroll(function () {
        var windowScroll = win.scrollTop(), // положение скрола
            windowHeight = win.height(), // высота окна браузера
            documentHeight = doc.height(); // высота нашего документа

        if ((windowScroll + windowHeight) === documentHeight && !$("#preloader", content).length) {
            content.append(preloaderTemplate);

            var preloader = $("#preloader", content);

            setTimeout(function () {
                items.append(template);
                preloader.remove();
            }, 1500); // после добавления шаблона, удаляется прелоадер с задержкой 1,5сек
        }
    });
});

Вариант получился рабочим, каждый раз при скроле вниз он создавал новый блок, но есть одно НО! Созданный код не воспринимал события со стороннего кода.

Поэтому родился второй вариант (в ручную написанный элемент попросту заменился на .clone() ):

$(function () {
    var win = $(window),
        doc = $(document),
        items = $("#items"),
        content = $('#content');

    var preloaderTemplate = '<div id="preloader">';

    var template =  $("div.cloneitem").clone();

    win.scroll(function () {
        var windowScroll = win.scrollTop(), // положение скрола
            windowHeight = win.height(), // высота окна браузера
            documentHeight = doc.height(); // высота нашего документа

        if ((windowScroll + windowHeight) === documentHeight && !$("#preloader", content).length) {
            content.append(preloaderTemplate);

            var preloader = $("#preloader", content);

            setTimeout(function () {
                items.append(template);
                preloader.remove();
            }, 1500); // после добавления шаблона, удаляется прелоадер с задержкой 1,5сек
        }
    });
});

В данном случае возникла проблема в том что данный код клонирует себя вниз, но потом сам себя заменяет.

Вопрос: Подскажите в чем причина того, что он создает div и постоянно заменяет его, вместо того чтобы создавать еще один такой же div ниже?