Question

我正在尝试在JQuery Mobile中设置一些html。它确实添加了html，但是当html被添加到div时它会丢失CSS。代码是这样的：

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

和Javascript在“testDiv”中添加一些html，如下所示：

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

});

任何帮助将不胜感激。

由于

Answer 1

您需要通过调用listview()告诉jQuery Mobile新插入的HTML实际上是列表视图：

$('#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")
  });

Answer 2

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

JQuery Mobile .html（...）失去了CSS

2 个答案: