0

很明显，这是一个时间问题。我有一个正在开发的 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...

4

1 回答 1

2

你是对的。这是一个时间问题。您的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. click您每次都为所有<a>标签添加事件。这是这样onclick做的行为。重复绑定事件处理程序是不好的。这就是为什么现在甚至引入了代表团。
  3. 改变了一点元素结构。（例如<a>标签）
  4. 重要最后，要refresh等待append完成，您可以添加promise()到append并等待它成为done()。

这是我所说的 abt 的原型：http : //jsfiddle.net/hungerpain/TdHXL/

于 2013-07-08T05:16:01.683 回答