脚本不适用于加载无限滚动的元素答案

【问题标题】：Script doesn't work on elements loaded with infinite scrolling脚本不适用于加载无限滚动的元素
【发布时间】：2012-09-20 13:10:08
【问题描述】：

我在我的 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。

【问题讨论】：

请发布您加载其他帖子的ajax部分
你如何调用/设置无限滚动（或者它是 tumblr 功能）？并展示给我们作为参考。
它最初是否有效，但滚动后新元素没有着色？在脚本运行之前或之后何时添加初始无限滚动元素？
如果有帮助，这是该网站：co-op.co.il 它适用于第一页上的元素，但添加的任何元素都不会运行脚本
您是否尝试在抓取元素时在您的infinite_scroll 调用中调用get_random_color？

标签： javascript tumblr infinite-scroll

【解决方案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 中的每个元素添加自定义颜色所以真的，我所做的只是获取您的代码并以与您尝试执行的方式不同的方式集成它，这是行不通的。从理论上讲，这应该有效。如果没有或您有任何疑问，请告诉我。

【讨论】：

嘿，谢谢！当我尝试在 main.js 中使用此代码时，它导致无限滚动停止工作