Jquery Mobile 可折叠在empty() 之后失败？

Question

我有一个动态生成的可折叠对象，但是在调用 .empty() 并动态生成另一个可折叠对象之后，它不会作为可折叠对象可见。我想要的只是在 .empty() 事件之后正确生成可折叠的内容。

首次动态折叠:

之后 .empty() 第n次动态折叠:

我如何创建可折叠然后附加按钮的一些 JS:

function createButton(buttonText,hrefLink,onclk,id) {
    console.log('=>'+onclk);
    var button = '<a href="'+hrefLink+'" onClick="'+onclk+'" class="ui-btn ui-btn-corner-all ui-shadow ui-btn-up-c" data-role="button" data-theme="c"' + '' + 'id="' + id + '"' + '>' +
        '<span class="ui-btn-inner ui-btn-corner-all">' +
        '<span class="ui-btn-text">' + buttonText + '</span>' +
        '</span>' +
        '</a>';
    return button;
}
function createCollapsible(collapsibleText,id){
        var collapsible = "<div data-role='collapsible' data-theme='a' id='set" + id + "'><h3>" + collapsibleText + "</h3></div>";
    return collapsible;
}

function createCurrentSets(station,set,container){
    $('#sampleSets').empty();
    $('#addSampleSet').hide();
        if(set === 'SNGL'){
            save_data('singleMultiContainer','single');
            save_data('set',set);
            $('#sampleSets').append(createCollapsible('Single',set));
            for(i=0;i<ls.length;i++){
                if(ls.key(i).match(stationSetContainerRegex)){
                var query = ls.key(i);
                var data = query.split('&');
                if(data[0]===station && data[1] === set){
                $('#set'+set).append(createButton(data[2],'#sampleParametersPage',"getJsonFromLocalStorage('"+station+'&'+set+'&'+data[2]+"');",data[2])).trigger('create');//createButton(set,'#setProperties',"changeSet(this.id)",set));
                    console.log('Current Sample created');
                }
                }
            }

        }else if ( set!== 'SNGL'){
            $('#sampleSets').append(createCollapsible('Set ' + set, set));
            for(i=0;i<ls.length;i++){
                if(ls.key(i).match(stationSetContainerRegex)){
                var query = ls.key(i);
                var data = query.split('&');
                if(data[0]===station && data[1] === set){
                $('#set'+set).append(createButton(data[2],'#sampleParametersPage',"getJsonFromLocalStorage('"+station+'&'+set+'&'+data[2]+"')",data[2])).trigger('create');//createButton(set,'#setProperties',"changeSet(this.id)",set));
                }
                }
            }


        }


}

附加的 HTML:

<div data-role="page" id="HomePage" >
    <div data-role="header" data-position="fixed" >
                <h3 id='HomePageHeader'></h3>
    </div>
    <div data-role="content">
        <div data-collapsed="false" data-content-theme="c" data-iconpos="right" data-role="collapsible" data-theme="a" data-collapsed-icon="plus" data-expanded-icon="minus" >
        <h1>Shipments Manager</h1>
        <div data-role="listview">
        <li><a href="#newSample" data-transition="slide">Add sets or groups</a>
        </li>
        <li><a href="#currentSamplePage" id='currentButton' data-transition="slide">Current</a>
        </li>
        <li><a href="#" data-transition="slide">History</a>
        </li>
        </div>
        </div>
        <div data-role="collapsible" data-collapsed="true" data-content-theme="c"data-collapsed-icon="plus" data-theme="a" data-expanded-icon="minus" data-iconpos="right">
        <h1>Manage Images</h1>
        </div>
        <div data-role="collapsible" data-collapsed="true" data-content-theme="c"data-collapsed-icon="plus" data-theme="a" data-expanded-icon="minus" data-iconpos="right">
        <h1>Tutorials</h1>
        </div>
        </div>
    <div data-role="footer" data-position="fixed">
        <div class="ui-grid-b">
           <div class="ui-block-a"><a href="#" data-icon="arrow-l" data-iconpos="left" data-role="button" data-rel="back" data-direction="reverse">Back</a></div>
           <div class="ui-block-b"><a href="#" data-icon="bars" data-role="button">Menu</a></div>
        </div>
    </div>
    </div>

    <div data-role="page" id="currentSamplePage" >
      <div data-role="header" data-position="fixed">
        <h3>Current Samples</h3>
      </div>
      <div data-role="content">
        <div id='currentSamples'></div>
      </div>
      <div data-role="footer" data-position="fixed">
        <div class="ui-grid-b">
           <div class="ui-block-a"><a href="#" data-icon="arrow-l" data-iconpos="left" data-role="button" data-rel="back" data-direction="reverse">Back</a></div>
           <div class="ui-block-b"><a href="#" data-icon="bars" data-role="button">Menu</a></div>
        </div>
      </div>
    </div>

    <div data-role="page" id="multiSet" >
        <div data-role="header" data-position="fixed">
            <h3>Select a sample set</h3>
        </div>
        <div data-role="content" >
         <div id="sampleSets">
         </div>
        </div>
        <div data-role="footer" data-position="fixed">
             <div class="ui-grid-b">
               <div class="ui-block-a"><a href="#" data-icon="arrow-l" data-iconpos="left" data-role="button" data-rel="back" data-direction="reverse">Back</a></div>
               <div class="ui-block-b"><a href="#" data-icon="bars" data-role="button">Menu</a></div>
               <div class="ui-block-c"><button data-icon="plus" data-iconpos="right" id="addSampleSet" data-theme="a">Add Sample</button></div>
             </div>
        </div>
    </div>

Answer 1

将项目动态附加到当前页面或已有页面时，您需要手动增强项目以应用 JQM 样式。

对于可折叠小部件，请在附加项目后调用以下代码。

$(".selector").collapsible();

引用:http://api.jquerymobile.com/collapsible/