Jquery Mobile - Dynamische Seiten sammeln im DOM

Question

Ich arbeite an einer einfachen Jquery Mobile-Anwendung, die eine Suche durchführt, Ergebnisse anzeigt und dann auf ein Ergebnis klicken kann, um zu einer dynamischen Detailseite zu gelangen. Auf der Detailseite gibt es eine reduzierbare Liste, die einen Ajax-Aufruf verwendet, um den Inhalt zu erhalten.

Es scheint auf der Oberfläche gut zu funktionieren, aber wenn ich es mit Firebug inspiziere merke ich, dass jedes Mal, wenn Sie auf eine Detailseite gehen und die zusammenklappbare Liste erweitern, der Ajax mehrere Male auslöst.

So zum Beispiel, ich suche, gehe auf die Detailseite, erweitern Sie die zusammenklappbare Liste, die Ajax einmal ausgelöst wird. Ich gehe zurück zur Ergebnisseite, klicke auf ein anderes Ergebnis, gehe zur Detailseite, erweitere die reduzierbare Liste, und der Ajax feuert zweimal usw. Jedes Mal, wenn ich die zusammenklappbare Liste expandiere, feuert der Ajax noch einmal ... so wenn ich 10 Ergebnisse ansehe, feuert der Ajax 10 mal.

Es scheint, dass die dynamischen Seiten im DOM akkumulieren und jedes Mal, wenn ich auf die reduzierbare Liste klicke, feuert es auf alle Selektoren, die im DOM aufgebaut sind (zumindest ist das meine Theorie).

Wie stelle ich sicher, dass mein Ajax nur einmal und nicht mehrmals ausgelöst wird?

Ich benutze Jquery Mobile 1.0.1 mit Jquery 1.6.4. Ich verwende PHP, um die Daten zu bekommen.

Hier ist mein Code für die Suchseite:

$('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); 
}); 

Hier ist der Code für die Detailseite:

$('#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; 
    }); 
}); 

Die html div, die wie folgt aussieht bevölkert wird:

<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> 

Ich habe hoch und niedrig nach einer Lösung gesucht und versucht, meinen Code aus verschiedenen Blickwinkeln zu überarbeiten, aber ich bin dazu nicht in der Lage Habe dieses Problem. Jede Hilfe würde sehr geschätzt werden. Vielen Dank.

Answer 1

Ich hatte dieses Problem auch. Ich habe versucht, den Vorschlag gefunden here, aber immer noch das mehrere Ereignisse auslösen Problem nach dem Versuch dies. Hier ist, was ich noch tun musste. Habe ich es von hier:

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

dazu:

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

Answer 2

Anstatt mit Jquery Live ich möchte Ihnen vorschlagen JavaScript Funktionsaufruf zu verwenden, wenn Sie für die Seite klicken change.Write Ihre Ajax-Aufruf in dieser Funktion, so dass seine nur genannt once.Hope dies hilft