JQueryMobile 可折叠不起作用

Question

我正在尝试将可折叠集与 JQM 结合使用。当我写：

<div id="content" data-role="main" class="ui-content" >
   <div class="box" data-role="collapsible">
      <h3>lang</h3>
      <p> lang = <input name="settings[lang]" value="en"></p>
   </div>
</div>

它工作正常，但是当我尝试从 JQuery 构建它时，它不会构建可折叠的。代码如下：

function f () {
   var str = '<div class="box" data-role="collapsible">' +
             '<h3>lang</h3>' +
             '<p> lang = <input name="settings[lang]" value="en">' +
             '</p>' +
             '</div>';
   $('#content').html(str);
}

有人知道这段代码有什么问题吗？

打孔

Answer 1

确保用另一个具有数据角色="collapsibleset"的div封装您的可折叠div，以便稍后能够刷新该元素：

<div id="content" class="ui-content" data-role="collapsibleset">

</div>

然后在动态插入可折叠对象后调用 .collapsibleset('refresh')：

function f () {
   var str = '<div class="box" data-role="collapsible">' +
             '<h3>lang</h3>' +
             '<p> lang = <input name="settings[lang]" value="en">' +
             '</p>' +
             '</div>';
   $('#content').html(str);
   $('#content').collapsibleset('refresh');            
}

查看工作示例：http://jsbin.com/fixefumose/edit?html,js,output

JQueryMobile 可折叠不起作用

JQueryMobile collapsible don't work

jquery

jquery-mobile

jquery-mobile-collapsible