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

を呼び出して、新しく挿入された HTML が実際にはリストビューであることを jQuery Mobile に伝える必要があります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 に答える