Скрипт не работает с элементами, загруженными с бесконечной прокруткой

Я использую этот скрипт на своей странице в tumblr, который дает сообщениям разные случайные цвета текста:

function get_random_color() {
var letters = '0123456789ABCDEF'.split('');
var color = '#';
for (var i = 0; i < 6; i++ ) {
    color += letters[Math.round(Math.random() * 15)];
}
return color;}
$(function() {
$(".post").each(function() {
    $(this).css("color", get_random_color());
}); });

Дело в том, что скрипт не работает для элементов, загружаемых с бесконечной прокруткой. Может ли кто-нибудь помочь мне переписать этот код? К сожалению, я не умею писать javascript.


person Johanna A    schedule 20.09.2012    source источник
comment
пожалуйста, разместите часть ajax, в которой вы загружаете другие сообщения   -  person Fabrizio Calderan    schedule 20.09.2012
comment
Как вы вызываете / настраиваете бесконечную прокрутку (или это функция tumblr)? И покажите нам это в качестве ссылки, пожалуйста.   -  person Henrik Ammer    schedule 20.09.2012
comment
Это работает изначально, но новые элементы не окрашиваются после прокрутки? Когда добавляются начальные элементы бесконечной прокрутки, до или после запуска скрипта?   -  person Mikey G    schedule 20.09.2012
comment
Это веб-сайт, если он вам поможет: co-op.co.il Он работает для элементов на первая страница, но любые добавленные элементы не запускают скрипт   -  person Johanna A    schedule 20.09.2012
comment
Вы пытались вызвать get_random_color в своем вызове infinite_scroll, когда вы захватываете элементы?   -  person Ally    schedule 20.09.2012
comment
У меня нет, подскажите как это сделать? Спасибо   -  person Johanna A    schedule 20.09.2012


Ответы (1)


Взгляните на сценарий main.js вашего блога. Вы можете вызвать свою пользовательскую функцию при захвате новых элементов с другой страницы. Это моя предлагаемая редакция вашего файла main.js.

$(window).load(function () {
var $wall = $('#content');
$wall.imagesLoaded(function () {
    $wall.masonry({
        itemSelector: '.post',
        isAnimated: false
    });
});
$wall.infinitescroll({
    navSelector: '#pagination',
    nextSelector: '#pagination li a.pagination_nextlink',
    itemSelector: '.post',
    loadingImg: "http://static.tumblr.com/kwz90l7/bIdlst7ub/transparent.png",
    loadingText: " ",
    donetext: " ",
    bufferPx: 100,
    debug: false,
    errorCallback: function () {
        $('#infscr-loading').animate({
            opacity: .8
        }, 2000).fadeOut('normal');
    }
}, function (newElements) {
    var $newElems = $(newElements);
    $newElems.hide();
    $newElems.each(function(value){
        value.css("color", get_random_color());
    });
    $newElems.imagesLoaded(function () {
        $wall.masonry('appended', $newElems, {
            isAnimated: false,
            animationOptions: {
                duration: 900,
                easing: 'linear',
                queue: false
            }
        }, function () {
            $newElems.fadeIn('slow');
        });
    });
    $(document).ready(function () {
        $("a[rel^='prettyPhoto']").prettyPhoto({
            deeplinking: false,
            default_width: 600,
            default_height: 550,
            allow_resize: true,
        });
    });
});
$('#content').show(500);
});

function get_random_color() {
    var letters = '0123456789ABCDEF'.split('');
    var color = '#';
    for (var i = 0; i < 6; i++ ) {
         color += letters[Math.round(Math.random() * 15)];
    }
    return color;
 }

Что я сделал, так это добавил вашу функцию get_random_color и вызвал ее из вызова Infinite Scroll, чтобы добавить собственный цвет к каждому из элементов в $newElems, так что на самом деле все, что я сделал, это взял ваш код и интегрировал его иначе, чем вы. пытались сделать, что не работало. Теоретически это должно сработать. Если это не так или у вас есть вопросы, дайте мне знать.

person Ally    schedule 21.09.2012
comment
Эй, спасибо! Когда я попытался использовать этот код в main.js, бесконечная прокрутка перестала работать. - person Johanna A; 23.09.2012