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>

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

enter image description here

我已经在我的应用程序中完成了很多次，并且它总能正常运行。我甚至使用相同版本的$和$.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");    
      });
   });
 }

我在您的代码中更改了

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

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

jquery移动列表视图刷新异常（可能是时间）

1 个答案:

我在您的代码中更改了