0

を使用して、MongoDB データベースからリストを動的に生成していますgetJSON()。

生成される HTML は正しく、関連する CSS スタイルも正しいです。

には<li>背景として画像が必要ですが、適用されていません。

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

解決

解決策には、 の div コンテナーに適用された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 に答える