Question

我正在使用getJSON()从MongoDB数据库动态生成列表。

生成的HTML是正确的，相关的CSS样式也是正确的。

<li>应该有图像作为背景，但它们没有被应用。

在Firebug中，我将鼠标悬停在每个<li>的图像背景网址上，并预览图像，这样我就可以告诉路径是正确的，它们只是没有显示。

我遇到的解决方案涉及使用listview('refresh')，但这似乎是一个jQuery Mobile解决方案，我只是使用标准的jQuery。

我看到的另一个解决方案是在函数运行后对元素使用addClass()，但该元素已经在HTML中应用了正确的类，该样式才会显示。

在运行函数后是否存在重新应用CSS的“标准”方法，或者确保将CSS应用于动态生成的列表的其他方法？

HTML

<ul class="my_ul_class"></ul>

jQuery （外部js文件）

$(document).ready(function() {
    loadListItems();
});

function loadListItems() {
    var href= "/url";
    $.getJSON("/path_to_python_script", {cid: href, format: 'json'}, function(results){
        $.each(results.my_key, function(k,v) {
            $("ul.my_ul_class").append("<li data-thing1=\"" + v + "\" class=\"prefix_" + v + "\"><ul class=\"nested\"><li class=\"hidden_li\"><p class=\"my_p_class\">text</p></li></ul></li>");
        });
    })
}

生成的HTML

<li class="prefix_1" data-thing1="1"><ul class="nested"><li class="hidden_li"><p class="my_p_class">text</p></li></ul></li>

Answer 1

<强>解决方案

解决方案涉及修改mCustomScrollbar函数的位置，该函数应用于<ul>的div容器。

jQuery （外部js文件）

// wrap mCustomScrollbar in a custom function
function listScrollbar() {
$("#my_ul_container").mCustomScrollbar({
horizontalScroll:true,
set_width: false,
set_height: false,
scrollInertia:550,
advanced:{
updateOnBrowserResize:true,
updateOnContentResize:true,
autoExpandHorizontalScroll:false,
autoScrollOnFocus:true
}
})
}

// dynamically generate <li>'s
function loadListItems() {
var href= "/url";
$.getJSON("/path_to_python_script", {cid: href, format: 'json'}, function(results){
$.each(results.my_key, function(k,v) {
$("ul.my_ul_class").append("<li data-thing1=\"" + v + "\" class=\"prefix_" + v + "\"><ul class=\"nested\"><li class=\"hidden_li\"><p class=\"my_p_class\">text</p></li></ul></li>");
});
// call the mCustomScrollbar function
listScrollbar()
})
}

// call loadListItems
$(document).ready(function() {
loadListItems();
});

如何将CSS样式应用于动态生成的列表（在mCustomScrollbar容器中）？

1 个答案: