I'm trying to add a div dynamically using jQuery mobile, but after adding it, the CSS is not applied even with the refresh.

The is the example.

Code :

$(function() {
     $("#data").append('<div data-role="collapsible"><h3>Div2</h3><p>Content Div2...</p></div>');
     $("#data").listview("refresh");
});

I'm trying to add a div dynamically using jQuery mobile, but after adding it, the CSS is not applied even with the refresh.

The is the example.

Code :

$(function() {
     $("#data").append('<div data-role="collapsible"><h3>Div2</h3><p>Content Div2...</p></div>');
     $("#data").listview("refresh");
});

• javascript
• jquery
• html
• css
• jquery-mobile

Share Improve this question Follow edited Mar 14, 2013 at 20:48 Mils asked Mar 14, 2013 at 20:33 MilsMils 1,50833 gold badges1919 silver badges4444 bronze badges

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 4

Use collapsibleset() instead of listview("refresh"):

$("#data").collapsibleset();

See DEMO.

I"m use such method

try{
    $("#data").listview("refresh");
}catch{
    $("#data").listview();
}finally{
    $('[data-role=collapsible]').collapsible();
}

This problem occurs when an item is added to the dynamic