JQuery Mobile .html(...) losing CSS

Question

I am trying to set some html in JQuery Mobile. It does add the html but it loses the CSS when the html is added to the div. The code is like this:

<div data-role="page" id="test">
  <div>
    <a id="testButton" data-role="button" data-inline="true">Hit me</a>
  </div>
  <div id="testDiv" data-role="content">
  </div>
</div>

and Javascript to add some html in the "testDiv" like this:

$(document).ready(function()
{
  $('#testButton').click(function() {
    var output = '<ul data-role="listview">';
    output += '<li><a href="#">Contact A</a></li>';
    output += '<li><a href="#">Contact B</a></li>';
    output += '<li><a href="#">Contact C</a></li>';
    output += '</ul>';

    $('#testDiv').html(output);
  });

});

Any help will be appreciated.

Thanks

CodingIntrigue · Accepted Answer · 2013-10-02 13:22:26Z

2

You need to tell jQuery Mobile that the newly inserted HTML is actually a listview by calling listview():

$('#testButton').click(function() {
    var output = '<ul data-role="listview" class="newlistview">';
    output += '<li><a href="#">Contact A</a></li>';
    output += '<li><a href="#">Contact B</a></li>';
    output += '<li><a href="#">Contact C</a></li>';
    output += '</ul>';

    $('#testDiv').html(output);
    $('.newlistview').listview().removeClass("newlistview")
  });

answered Oct 2, 2013 at 13:22

CodingIntrigue

79k32 gold badges176 silver badges178 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Ved · Accepted Answer · 2013-10-02 13:51:57Z

0

$('#testDiv').html(output).trigger("create");
$('.newlistview').listview("refresh");

edited Oct 2, 2013 at 13:51

answered Oct 2, 2013 at 13:35

Ved

2,7012 gold badges24 silver badges30 bronze badges

Collectives™ on Stack Overflow

JQuery Mobile .html(...) losing CSS

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related