javascript - 在 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>与data-role='collapsible'不呈现为可折叠项，这也会对我稍后尝试放入其中的 HTML 产生影响。

感谢帮助，谢谢!

Answer 1

在 Markup.Collapsible 函数内并在其末尾添加以下内容。对于 collapsible-set，您需要告诉 jQM 您正在增强 .collapsibleset() 并将其与 .trigger('create').

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

Demo

---

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