jquery mobile, add collapsible content inside of a listview li dynamically

Question

I have an empty list view:

<ul data-role="listview" data-theme="d" id="test">

</ul>

I'd like to add li tags which contain collapsible content dynamically, but I don't know how to "refresh" it so that the collapsible content shows up?

I tried:

$(document).on('pageinit', function() {
$('#test').append('<li><a href="#"><div data-role="collapsible" class="member-item" data-theme="a"><h3>title</h3><p>some content</p></div></a><a href="#">test</a></li>');
$('#test').listview("refresh");
});

But this only refreshes the li part.

Then I tried:

$(document).on('pageinit', function() {
$('#test').append('<li><a href="#"><div data-role="collapsible" class="member-item" data-theme="a"><h3>title</h3><p>some content</p></div></a><a href="#">test</a></li>');
$('#test').listview("refresh");
$('.member-item').collapsible('refresh');
});

But then I just get the loading icon and the page does not load?

Answer 1

Looks like I had to trigger "create" then refresh the listview:

$('#test').trigger('create');
$('#test').listview("refresh");