JQueryMobile collapsible don't work

Question

I am trying to use a collapsible-set with JQM. When I write:

<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>

it works fine, but when I try to build it out of JQuery it doesn't build a Collapsible. Code is like:

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);
}

Does anybody know what's wrong with that code?

Punching

Answer 1

Make sure to encapsulate your collapsible div with another div that has data-role="collapsibleset" in order to be able to refresh that element later:

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

</div>

and then call .collapsibleset('refresh') after inserting your collapsible dynamically:

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');            
}

see a working example at: http://jsbin.com/fixefumose/edit?html,js,output