Are element added by .append() already ready after appended?

Question

I am building a kind of infinite scroll with jquery, but I am facing a DOM ready problem.

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++;
    }

}

My problem is images sources don't change. How to solve this problem ?

I checked the response with alert(), and it gives me the wanted link ('http://example.com/images/1.png'), so the problem is not from my php file. — David, Feb 25 '14 at 21:08
possible duplicate of [Javascript closure inside loops - simple practical example](http://stackoverflow.com/questions/750486/javascript-closure-inside-loops-simple-practical-example) — Barmar, Feb 25 '14 at 21:09

score 4 · Answer 1 · answered Feb 25 '14 at 21:09

4

Your problem is scope. You create the DIVs and IMG ids with n as you loop through it. But you access the value of n in your ajax callback. So it will attempt to find $("#img"+n).attr("src", resp); with whatever the current value of n is (most likely the final value since it will finish faster than the post returns);

answered Feb 25 '14 at 21:09

Matt Pileggi

7,126
4
16
18

ok, problem solved. I didn't noticed that. I used @Karl-André Gagnon 's script – David Feb 25 '14 at 21:16

score 2 · Accepted Answer · answered Feb 25 '14 at 21:12

2

The problem is that since AJAX is async, your variable n inside the success call is equal to the variable n inside the last loop. Add a closure like that :

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

answered Feb 25 '14 at 21:12

Karl-André Gagnon

33,662
5
50
75

1

+1 for actually providing an answer, not just describing the problem. – Colin DeClue Feb 25 '14 at 21:20

score 0 · Answer 3 · answered Feb 25 '14 at 21:19

As many people have pointed out, you have other issues that are causing the problems that you are seeing, but to answer your actual question, yes, they are available after .append(). Actually, what you find people do, frequently, is actually make the element available before appending it. In your code (since you're using jQuery), you could do that like this:

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

At that point, the element exists and can be read, modified, etc., but simply has not been added to the DOM yet.

Are element added by .append() already ready after appended?

3 Answers3