Jquery Mobile - ダイナミックページDOMで累積

Question

私は検索を行い、結果を提示し、結果をクリックして動的な詳細ページに行くことができるシンプルなJquery Mobileアプリケーションに取り組んでいます。詳細ページには、コンテンツを取得するためにajax呼び出しを使用する折りたたみ可能なリストがあります。

表面上は正常に動作しているようですが、Firebugで詳細を調べると、詳細ページに移動して折りたたみ可能なリストを展開するたびに、ajaxが複数回発生します。

たとえば、私は検索を行い、詳細ページに行き、折りたたみ可能なリストを展開して、ajaxを一度実行します。結果ページに戻り、別の結果をクリックし、詳細ページに移動し、折りたたみ可能なリストを展開して、ajaxを2回実行します。折りたたみリストを展開するたびに、ajaxはもう1回発火します。私が10の結果を見ると、アヤックスは10回発砲します。

動的ページがDOMに蓄積されているように見えます。折りたたみ可能なリストをクリックするたびに、DOMに構築されているすべてのセレクタが起動します（少なくとも私の理論です）。

私のajaxが複数回ではなく1回だけ発生することを確認するにはどうすればよいですか？

Jquery Mobile 1.0.1とJquery 1.6.4を使用しています。私はデータを取得するためにPHPを使用しています。ここで

は、検索ページのための私のコードです：

$('form#searchCompanies').submit(function(event) { 
    getSearchResultsCompanies(); 
    return false; 
}); 

function getSearchResultsCompanies() { 
    $.ajax({ 
     type: "POST", 
     url: baseURL + 'server/searchCompanies.php', 
     data: $("form#searchCompanies").serialize(), 
     dataType: 'json', 
     success: function(results){ 
      $('#companyList li').remove(); 
      for (var i=0; i < results.length; i++) { 
       $('#companyList').append('<li><a href="' + baseURL + 'companyDetail.htm?companyid=' + results[i].CompanyId + '" data-uid="' + results[i].CompanyId + '" class="companyDetail">' + results[i].CompanyName + '</a></li>'); 
      } 
      $('#companyList').listview('refresh'); 
     } 
    }); 
    return false; 
} 

$('.companyDetail').live('click', function(event) { 
    //save companyid so that we can reference it on detail page 
    var companyid = $(this).attr('data-uid'); 
    localStorage.setItem('thisCompanyId', companyid); 
}); 

ここでは、詳細ページのコードです：

$('#companyDetailPage').live('pageshow', function(event) { 
    var companyid = localStorage.getItem('thisCompanyId'); 
    $.ajax({ 
      type: "POST", 
      url: baseURL + 'server/getCompanyDetail.php?companyid=' + companyid, 
      data: {companyid: companyid}, 
      dataType: 'json', 
      success: function(company) { 
       $.each(company, function(index, company) { 
        $('#companyName').html(company.CompanyName); 
        //etc...pulls in more data to populate the page 
       }); 
      } 
     }); 


    //this is the call that fires multiple times 
    $('#companyContacts').live('expand', function(event) { 
     $('#companyContactList li').remove(); 
     $.ajax({ 
      type: "POST", 
      url: baseURL + 'server/getCompanyContacts.php?companyid=' + companyid, 
      dataType: 'json', 
      success: function(results){ 
       for (var i=0; i < results.length; i++) { 
        $('#companyContactList').append('<li>' + results[i].LastName + 'etc...more data</li>'); 
       } 
       $('#companyContactList').listview('refresh');   
      } 
     }); 
     return false; 
    }); 
}); 

このような人口ルックスを取得するHTMLのdiv：

<div data-role="collapsible" data-collapsed="true" id="companyContacts" class="cmdCompanyContacts"> 
    <h3>Contacts (<span id="totalContacts"></span>)</h3> 
    <ul id="companyContactList" data-role="listview"><li></li></ul> 
</div> 

は、

高解像度と低解像度を検索し、さまざまな角度からコードを再加工しようとしましたが、できませんこの問題は避けてください。どんな助力も深く感謝します。ありがとう。

Answer 1

を助けあなたがその機能であなたのAJAX呼び出しは、そのが呼び出されているようchange.Writeページのためにクリックしたときにはjavascriptの関数呼び出しを使用することをお勧めしたいと思います私もこの問題を抱えていた。私は提案がhereを見つけたが、これを試しても問題を引き起こした複数のイベントが残っていた。ここに私がしなければならなかったことがあります。私はあなたがこのように意味を前提と

$(‘#myPage’).bind(‘pageinit’, function (event) { 
$(‘#myButton’).click(function (event, ui) { 

Answer 2

むしろライブのjQueryを使用するよりも、私は唯一のonce.Hopeこれは