Question

here’s the problem:
I have a function that populates a list with links but the $.each function makes two loops through the linkList object and populates the container twice (2*2=4 items instead of 2) can somebody explain why?

here’s the link list:

var linkList = {
    link1:["Title","Source","http://google.com","file.pdf"],
    link2:["Title2","Source2","http://google.com","file.pdf"]
};

and here is the function:

function injectLinks(){

    $.each(linkList, function(i,item) {

        var title = item[0];
        var source = item[2];
        var extern = item[3];


        $('#linkListView').append('\
                <li>\
                    <a rel="external" href="'+extern+'">\
                            <h3>'+title+'</h3><p>'+source+'</p>\
                    </a>\
                </li>\
            ');
        });



}

Answer 1

Found my problem, actually the populating function was called inside of a $document.ready function which was called once DOM is ready and another time after the populating function finished its work (DOM manipulation calls the document ready function) that’s why I had double population. Thanks for your help.

So I used this technique:

var pageInitialized = false;

$(function(){
    if(pageInitialized) return;
    pageInitialized = true;
    //do things
}