0

我正在尝试在 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);
  });

});

任何帮助将不胜感激。

谢谢

4

2 回答 2

2

您需要通过调用告诉 jQuery Mobile 新插入的 HTML 实际上是一个列表视图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")
  });
于 2013-10-02T13:22:26.837 回答
0 
$('#testDiv').html(output).trigger("create");
$('.newlistview').listview("refresh");
于 2013-10-02T13:35:44.390 回答