JQuery Mobile - dynamic pages that accumulate in the DOM

I'm working on a simple jQuery Mobile app that does a search, presents the results, and then lets you click on the result to go to a dynamic detail page. The detail page has a roll-up list that uses an ajax call to get its contents.

It seems to work fine on the surface, but when I test it with Firebug I notice that every time you go to the detail page and expand the collapsible list, the ajax fires multiple times.

So, for example, I do a search, go to the detail page, expand the folded list, ajax fires once. I go back to the results page, click on another result, go to the details page, expand the folded list, and the ajax runs twice, etc. Every time I expand the folded list, ajax fires again ... so if I look at 10 results, ajax fires 10 times.

It would seem that dynamic pages are accumulating in the DOM, and every time I click on the collapsible list, it fires on all selectors that were created in the DOM (at least in my theory).

How can I make sure my ajax is only triggered once and not multiple times?

I am using JQuery Mobile 1.0.1 with JQuery 1.6.4. I am using php to get data.

Here's my code for the search page:

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

      

        
        
        
      

    

Here's the code for the detail page:

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

      

        
        
        
      

    

The live html header looks like this:

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

      

        
        
        
      

    

I've searched for high and low resolution and tried to refactor my code from different angles, but I can't seem to solve this problem. Any help would be deeply appreciated. Thank.