jquery mobile listview刷新异常（可能是定时）

Question

很明显，这是一个时间问题。我有一个正在开发的 jQuery 移动应用程序。我正在执行将项目附加到列表视图的标准方法。然后在附加项目后调用refresh。是的，我在 html 的头部有 jQuery 和 jQuery mobile，是的，我使用的是 'pageinit' 事件而不是 $(document).ready()。以下是来源：

JS

GetApps: function () {
    $('#manage-apps-list').empty();
    $.get('../../../config.xml', function (data) {
        $(data).find('app').each(function () {
            var $this = {}; 
            $this = $(this);
            $('#manage-apps-list').append(
                $('<li/>').append(
                    $('<a/>').attr('href', "#app-settings").attr('data-id', $this.find('id').text()).html($this.find('title').text()).off('click').on('click', function () {GetAppDetail($(this).attr('data-id'));})
                )
            );
        });
    });
    $('#manage-apps-list').listview('refresh');
}

HTML

<div id="manage-apps" data-role="page" data-theme="d">
    <div data-role="content">
        <a href="#settings" data-role="button" data-mini="true" data-inline="true">Back</a>
        <h2>Manage Apps</h2>
        <ul id="manage-apps-list" data-role="listview" data-inset="true"></ul>
    </div>
</div>

这不是要看到的初始页面，而是一个子页面。结果如下：

我已经在我的应用程序中多次执行此操作，并且始终可以正常运行。我什至使用相同版本的$ 和$.mobile

我在 SO 上看到了很多关于此的其他问题，但他们都没有拨打refresh...

Answer 1

你是对的。这是一个时间问题。您的 refresh 方法不会等待列表完成其追加工作。因此，需要对您的 get 方法进行轻微重组：

GetApps: function () {
    $('#manage-apps-list').empty();
    $.get('../../../config.xml', function (data) {
      //set up an array for adding li to it.
      var li = [];
      //a temporary element to store "li"
      var $li;
      $(data).find('app').each(function () {
         var $this = $(this);
         //add the li HTML element to a vairable
         $li = $('<li/>').append(
         //you can also create the anchor tag like this - looks nicer :)
         $('<a/>', {
             "href": "#app-settings",
                 "data-id": $this.find('id').text(),
                 "html": $this.find('title').text()
         }));
         //add this $li to the main array of li
         li.push($li);
      });
      //append li [] to ul
      $('#manage-apps-list').append(li).promise().done(function () {
         //wait for list to be added - thats why you wait for done() event in promise()
         //add the click events to this - event delegation - this way your click event is added only once 
         $(this).on('click', 'a', function (e) {
             //to prevent default click - just in case
             e.preventDefault();
             GetAppDetail($(this).attr('data-id'));
         });
         //then refresh
         $(this).listview().listview("refresh");    
      });
   });
 }

我在您的代码中所做的更改

1. 您在获得each 中的数据时正在追加。我将它推送到一个数组并在最后附加它。所以你总共只有一个追加。
2. 您每次都为所有<a> 标签添加click 事件。这是onclick 所做的行为。重复绑定事件处理程序是不好的。这就是为什么现在甚至引入了代表团。
3. 改变了一点元素结构。 （例如<a> 标签）
4. 重要 最后，要让refresh 等待append 完成，您可以将promise() 添加到append 并等待它成为done()。

这是我正在谈论的原型的原型：http://jsfiddle.net/hungerpain/TdHXL/