Script doesn't work on elements loaded with infinite scrolling

问题

I'm using this script on my tumblr page, which gives posts different random text colors:

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

The thing is the script isn't working for elements loaded with infinite scrolling. Can anyone help me rewrite this code? I don't know how to write javascript sadly.

回答1:

Take a look at your blog's main.js script. You can call your custom function when you grab the new elements from another page. This is my proposed revision of your main.js file.

$(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;
 }

What I've done is add your get_random_color function and called it from within the Infinite Scroll call to add a custom color to each of the elements in $newElems so really, all I've done is taken your code and integrated it differently than what you were trying to do, which wasn't working. This should, theoretically, work. If it doesn't or you have questions, let me know.

来源：https://stackoverflow.com/questions/12513337/script-doesnt-work-on-elements-loaded-with-infinite-scrolling

标签

javascript

tumblr

infinite-scroll