Question

I have a lot of dynamically loaded content, for some reason Images are doing great, but Links and Text are not.

Here is a JSFiddle with the issue: http://jsfiddle.net/HRs3u/1/

I am guessing it has something to do with the text caching or not caching?

Here is the append section of the code:

function findpost(timestamp, blog){
    //console.log(blog);
    var length = blog.length;
    for(var e=0; e<length; e++){
        var type = blog[e+1];
        if(timestamp === blog[e]){
            if(type === 0){
                $("#content").append("\
                    <div class='post photo'>\
                    <img src='"+blog[e+2]+"' width='400px'/>\
                    </div>"
                );
            } else if(type === 1){
                $("#content").append("\
                    <div class='post video'>\
                    "+blog[e+2]+"<br>\
                    "+blog[e+3]+"\
                    </div>"
                );
                console.log("Video");
            } else if(type === 2){
                $("#content").append("\
                    <div class='post link' />\
                    <a href='"+blog[e+2]+"' target='_blank'>"+blog[e+3]+"</a>\
                    </div>\
                ");
                console.log("Link!");
            } else if(type === 3){
                var title = blog[e+3];
                var text = blog[e+2];
                $("#content").append("\
                    <div class='post text' />\
                    <h2>"+title+"</h2>\
                    "+text+"\
                    </div>\
                ");
                console.log("Text!");
            } else if(type === 4){
                $("#content").append("\
                    <div class='post tweet' />\
                    "+blog[e+2]+"\
                    </div>\
                ");
                console.log("Tweet!");
            } else {
                console.warn("ERROR!");
            }
        }
    }
}

And the CSS:

/*___Post Divs*/
.post{
    display     : inline-block;
    float       : left;
    line-height : 0;
    margin      : 5px;
    overflow    : hidden;

    border      : 1px solid #000;

    width       : 400px;
    height      : 400px;

}

.post.photo{
    background-color: #ccc;
}

.post.video{
    background-color: #0f1;
}

.post.link{
    background-color: #ff4;
}

.post.text{
    background-color: #c0f;
}

.post.tweet{
    background-color: #f44;
}

Answer 1

It’s because in some of the append method, you’re closing the div beforehand. Check the script where type equals 2, 3 & 4.

function findpost(timestamp, blog){
    //console.log(blog);
    var length = blog.length;
    for(var e=0; e<length; e++){
        var type = blog[e+1];
        if(timestamp === blog[e]){
            if(type === 0){
                $("#content").append("\
                    <div id='post' class='photo'>\
                    <img src='"+blog[e+2]+"' width='400px'/>\
                    </div>"
                );
            } else if(type === 1){
                $("#content").append("\
                    <div id='post' class='video'>\
                    "+blog[e+2]+"<br>\
                    "+blog[e+3]+"\
                    </div>"
                );
                console.log("Video");
            } else if(type === 2){
                $("#content").append("\
                    <div id='post' class='link'>\ 
                    <a href='"+blog[e+2]+"' target='_blank'>"+blog[e+3]+"</a>\
                    </div>\
                ");
                console.log("Link!");
            } else if(type === 3){
                var title = blog[e+3];
                var text = blog[e+2];
                $("#content").append("\
                    <div id='post' class='text'>\
                    <h2>"+title+"</h2>\
                    "+text+"\
                    </div>\
                ");
                console.log("Text!");
            } else if(type === 4){
                $("#content").append("\
                    <div id='post' class='tweet'>\
                    "+blog[e+2]+"\
                    </div>\
                ");
                console.log("Tweet!");
            } else {
                console.warn("ERROR!");
            }
        }
    }
}​