Jquery Mobile - 在DOM中积累的动态页面

Question

我正在研究一个简单的Jquery Mobile应用程序，它执行搜索，呈现结果，然后允许您单击结果以进入动态详细信息页面。在详细信息页面上有一个可折叠列表，它使用ajax调用来获取其内容。

它似乎在表面上工作正常，但是当我用Firebug检查它时，我注意到每次进入详细页面并展开可折叠列表时，ajax都会多次触发。因此，例如，我做了搜索，进入详细页面，展开可折叠列表，ajax激发一次。我回到结果页面，点击另一个结果，转到详细信息页面，展开可折叠列表，并且ajax激发两次，等等。每次我展开可折叠列表时，ajax再发射一次...所以如果我看10个结果，阿贾克斯发射10次。

看起来，动态页面正在堆积在DOM中，并且每次我点击可折叠列表时，它都会触发在DOM中构建的所有选择器（至少这是我的理论）。

如何确保我的ajax只触发一次而不是多次？

我正在Jquery 1.6.4使用Jquery Mobile 1.0.1。我使用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

我也有这个问题。我试着发现here的建议，但尝试完成后仍然遇到多事件触发问题。这是我不得不做的。我改变了它从这个：

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

这样：

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

Answer 2

而不是使用jQuery活着，我想建议你，当你点击change.Write该功能时，您Ajax调用，使得其被称为页面使用JavaScript函数调用仅此once.Hope有助于