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

确保为了与其他的div有数据角色=“collapsibleset”来包装可折叠股利以后能够刷新元素：

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

</div> 

，然后调用。 collapsibleset（ '刷新'）动态插入您的可折叠后：

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