jQuery 移动列表视图不起作用

Question

我正在为 Android 开发一个 phonegap 应用程序。 当然，我使用 jQuery mobile。此刻，我制作了一个带有 3 个选项卡的导航栏， 当我更改选项卡时，内容会更改而无需重新加载导航栏。我用 一个单独的 javascript 来更改内容。

但是现在我正在开发一个列表视图，就像你在 jQuery 移动演示中看到的那样。 问题是这行不通。你看不到“像列表项这样的应用程序”， 但是你会看到一个带有 listitemname 的点，一个没有任何 css 的 html listitem。

列表视图在“page_zoek_category”中，里面有一个“content_zoek_category”，在里面你可以找到列表视图“list_category”

我的html脚本：

<div data-role="page" id="page_main">
  <div data-role="navbar">
      <ul>
          <li><a id="tab_home" href="#" class="ui-btn-active">Home</a></li>
          <li><a id="tab_zoek" href="#" >Zoek</a></li>
          <li><a id="tab_scan" href="#" >Scan</a></li>
      </ul>
  </div>

  <div data-role="content" id="content_main">
  </div>
</div>

<div data-role="page" id="page_home">
  <div data-role="content" id="content_home">
    home
  </div>
</div>

<div data-role="page" id="page_zoek_category">
  <div data-role="content" id="content_zoek_category">
      <ul data-role="listview" id="list_category" data-inset="true">
          <li><a href="#">Acura</a></li>
      </ul>
  </div>
</div>

<div data-role="page" id="page_zoek_detail">
  <div data-role="content" id="content_zoek_detail">
      zoek_detail
  </div>
</div>

<div data-role="page" id="page_scan">
  <div data-role="content" id="content_scan">
      scan
  </div>
</div>

这是我的 javascript 文件

$( document ).ready(function() {
    $('#content_main').html($('#content_home').html());

    $("#tab_home").click(function () {
        $('#content_main').html($('#content_home').html());
    });

    $("#tab_zoek").click(function () {
        $('#content_main').html($('#content_zoek_category').html());
    });

    $("#tab_scan").click(function () {
        $('#content_main').html($('#content_scan').html());
    });
});

Answer 1

添加这个

$("#tab_zoek").click(function () {
    $('#content_main').html($('#content_zoek_category').html());
    $('#page_main').trigger( "create");
});

http://jsfiddle.net/Lu4qw/

第二种方式：

$("#tab_zoek").click(function () {
    $('#content_main').html($('#content_zoek_category').html());
    $('#list_category').listview().listview("refresh");
});

http://jsfiddle.net/Lu4qw/1/