在jQuery Mobile中动态创建可折叠集

Question

好的,一旦我看到答案,我会感到愚蠢.我很确定.

我之前完全按照我想要的方式创建了这个,但我现在正在为新版本重构我的代码.我试图在jQuery Mobile中动态创建可折叠集,但我的html无法正确呈现.

  <div data-role="header">
        <h2>Playground</h2>
    </div>
    <div data-role="content">
        <div data-role="button" id="addprimary" data-inline="true">Add 5</div>
        <div data-role="collapsible">             
            <h4>Collapsible</h4> 
            <form id="makecollapsible">
            </form>
        </div>
    </div>
    <div data-role="footer">
        <h4>Please, no applause</h4>
    </div>
</div>

<script>
$('#addprimary').on('click', function () {
    Markup.Collapsible();
});

var Markup = new Object();


Markup.Collapsible = function () {

$('#makecollapsible')
.append($('<div>')
    .attr({ 'data-role': 'collapsible-set', 'id': 'primary' })
 );
for (i = 0; i < 5; i++) {
    ($('<div>')
         .attr({ 'data-role': 'collapsible', 'data-content-theme': 'c', 
              'data-collapsed': 'true' })
         .html('<h4>' + i +'</h4>'))
    .appendTo('#primary');
   }
}
</script>

有人可以看看这个http://jsfiddle.net/c2jLY/告诉我我错了吗？我的<div>s data-role='collapsible'不会呈现为可折叠的,这也会对我稍后试图放入的HTML产生影响.

感谢帮助,谢谢!

Answer 1

内部Markup.Collapsible功能及其末尾添加以下内容.对于可折叠集,您需要告诉jQM您正在增强.collapsibleset()并将其与其组合.trigger('create').

$('#makecollapsible').collapsibleset().trigger('create');

演示

我忘了提到动态追加项目时,在父元素上调用增强方法; 这样做,会增强孩子们的元素.因此,您不需要.collapsible().trigger('create')为每个可折叠的附加使用.