добавить складной в другой складной (вложенный складной) в JQM

Я хочу получить это:

вложенные складные элементы

Но мне нужно создать HTML динамически, потому что он загружается через AJAX из внешнего ресурса. Я уже задавал этот вопрос здесь (JQM: динамические вложенные складные элементы - $(складной). collapsible() & $(collapsible).trigger('create')), но я совершенно ошибся со списками и складными элементами, поэтому решил, что новый вопрос будет лучше.

Вот что я получил до сих пор:

function loadTipps() {
    console.log("Lade Tipps..");
    var categoriesURL = tippsURL+"?type=kategorien&callback=?"; // url for the categories
    $.getJSON(categoriesURL,function(data) {
        console.log("Lade Kategorien..");
        var DIV_tipps_komplett = $("#tipps_komplett");
        $.each(data, function(key,value){
            var kategorie_ID = value.id;
            var kategorie_NAME = value.name;

            var collapsible_HTML = $('<div data-role="collapsible"></div>');
            var kategorie_Ueberschrift_HTML = $('<h3>'+kategorie_NAME+'</h3>');
            var tipps_kategorie_HTML = $('<div id="tipps_kategorie'+kategorie_ID+'" data-role="collapsible-set"></div>');

            var tippURL = tippsURL+"?type=tipp&kat_id="+value.id+"&callback=?"; // url for the tipps of the current category
            $.getJSON(tippURL,function(data2) {
                $.each(data2, function(key2,value2){
                    var tipp_Ueberschrift_Text_HTML = '<div data-role="collapsible"><b>'+value2.name+'</b><p>'+value2.text+'</p><br></div>';
                    tipps_kategorie_HTML.append(tipp_Ueberschrift_Text_HTML);
                }); //<--each
            });//<--getJSON

            collapsible_HTML.append(kategorie_Ueberschrift_HTML);
            collapsible_HTML.append(tipps_kategorie_HTML);
            DIV_tipps_komplett.append(collapsible_HTML);
        });//<--each
        DIV_tipps_komplett.trigger('create');
    });//<--getJSON
}

Это приводит к:

не вложенный

Как видите, элементов в первом складном наборе нет в другом складном наборе. Есть идеи, почему?


nested jquery-mobile dynamically-generated jquery-mobile-collapsible
person lornz    schedule 13.11.2013    source источник
comment
сделайте что-то вроде этого jsfiddle.net/Palestinian/T3gAj, так как трудно дать полное решение с данные. Если вы создадите jsfiddle, вам будет легче помочь.   -  person Omar    schedule 13.11.2013
comment
Итак, вы ответили на свой дублирующий вопрос, но вы не удовлетворены своим ответом, поэтому вы задаете его снова?   -  person shanabus    schedule 13.11.2013
comment
возможный дубликат JQM: динамические вложенные складные элементы - $(collapsible).collapsible() & $(складной).trigger('создать')   -  person shanabus    schedule 13.11.2013

Ответы (1)


arrow_upward
0
arrow_downward

Попробуйте изменить строку:

var tipp_Ueberschrift_Text_HTML = '<div data-role="collapsible"><b>'+value2.name+'</b><p>'+value2.text+'</p><br></div>';

to

var tipp_Ueberschrift_Text_HTML = '<div data-role="collapsible"><h3>'+value2.name+'</h3><p>'+value2.text+'</p><br></div>';

Collapsible нуждается в элементе <h3> вместо <b> для рендеринга.

Вот демонстрация вашего точного кода с удаленными вызовами AJAX: http://jsfiddle.net/ezanker/RkLuV/

Кстати, это в значительной степени ответ, который я дал вам здесь: >сворачиваемый список со свернутыми элементами в jqm, наверное, лучше было бы продолжить разговор там.

person ezanker    schedule 13.11.2013