Question

我正在使用jquery构建一种无限滚动，但我正面临一个DOM就绪问题。

var n = 0;

// When user wants to load more, call this 
function load_10_images(){

    var g; var images = '';

    for(g=1; g<=10; g++){

        // Create images
        images = '<div id="'+n+'" >'+
                    '<li id="li'+n+'">'+
                        '<img id="img'+n+'" src="images/loading.gif" />'+
                    '</li>'+
                 '</div>';

        // add to html
        $("#list").append(images);

        // change source
        $.ajax({
            type: "POST",
            url: "data.php",
            data: {link_n: n},
            success: function(resp) {
                $("#img"+n).attr("src", resp);
            },
        });

        // ...
        n++;
    }

}

我的问题是图像来源不会改变。如何解决这个问题？

Answer 1

你的问题是范围。在循环时用n创建DIV和IMG ID。但是您可以在ajax回调中访问n的值。所以它会尝试找到$（“＃img”+ n）.attr（“src”，resp）;无论n的当前值是什么（最有可能是最终值，因为它将比post返回更快完成）;

Answer 2

问题在于，由于AJAX是异步的，因此成功调用中的变量n等于最后一个循环中的变量n。添加一个这样的闭包：

(function(int){
    $.ajax({
        type: "POST",
        url: "data.php",
        data: {link_n: int},
        success: function(resp) {
            $("#img"+int).attr("src", resp);
        },
    });
})(n);

Answer 3

正如许多人所指出的，你有其他问题导致你所看到的问题，但回答你的实际问题，是的，它们在.append()之后可用。实际上，你经常发现的人实际上是在附加之前使元素可用。在你的代码中（因为你正在使用jQuery），你可以这样做：

images = $('<div id="'+n+'" >'+ '<li id="li'+n+'">'+ '<img id="img'+n+'" src="images/loading.gif" />'+ '</li>'+ '</div>');

此时，该元素存在且可以被读取，修改等，但尚未添加到DOM中。

附加后，.append（）添加的元素是否已准备好？

3 个答案: