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。それを配列にプッシュし、最後に追加しました。したがって、全体で追加は 1 つだけになります。
  2. すべてのタグclickに対して毎回イベントを追加していました。<a>これは行った動作onclickです。イベント ハンドラを繰り返しバインドするのは良くありません。そのため、現在では委任さえも持ち込まれています。
  3. 要素構造を少し変更しました。(たとえば、<a>タグ)
  4. 重要最後に、 が完了するのをrefresh待つために、appendに追加promise()して、 になるのappendを待つことができますdone()。

これが私が話していることのプロトタイプです: http://jsfiddle.net/hungerpain/TdHXL/

于 2013-07-08T05:16:01.683 に答える