0

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

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

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

在 Firebug 中，我将鼠标悬停在每个图像的背景 URL 上<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>
4

1 回答 1

0

解决方案

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

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();
});
于 2013-12-30T09:32:18.470 回答