Using ajax: javascript – Append element to list dynamically, but browser doesn’t refresh UI on newest questions tagged ajax – Stack Overflow

I have a JavaScript code segment for loading server’s data items, and insert them into UL element with generated LI elements like this:

function loadNewFileTemplates() {

    var list = _fileTemplateContainer.find("ul");

    $.submitToServer("[server URL]", null, function (data) {

        list.empty();

        if (data == "") {
            list.append("Templates not available."); // in sample code, removed HTML tags
        }
        else {
            $.each(data, function (index, item) {

                var itemElement = $("[HTML template string]");

                itemElement.find("div[data-field='image']").css("background-image", "url(" + item.icon + ")");
                itemElement.find("div[data-field='caption']").text(item.caption);
                itemElement.find("div[data-field='description']").text(item.description);
                itemElement.find("div[data-field='type']").text(item.type);

                itemElement.bind("click", function (e) {

                    $(e.target).parents("ul").find("li").removeClass("projectSelected");
                    $(e.target).parents("li").addClass("projectSelected");

                });

                itemElement.appendTo(list);

            });
        }

        console.log(list);
    });

}

This code works on first loading, but in second loading, the UI cannot refresh after elements inserted into UL element.

I confirmed the data is inserted successfully (use console.log() to output result), so I can’t find the reason about this issue.

Please view the screen shot for this issue.

How to resolve this problem?
Thanks.

My browser: Chrome 19.0.1084.56, IE 9.0.8112.16421
jQuery version 1.5.1

See Answers


source: http://stackoverflow.com/questions/11028884/javascript-append-element-to-list-dynamically-but-browser-doesnt-refresh-ui
Using ajax: using-ajax



online applications demo