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

我正在开发一个简单的Jquery移动应用程序，它执行搜索，显示结果，然后允许您单击结果以转到动态详细信息页面。在detail页面上有一个可折叠的列表，它使用ajax调用获取其内容

它在表面上似乎工作得很好，但当我用Firebug检查它时，我注意到每次你转到一个细节页面并展开可折叠列表时，ajax都会触发多次

例如，我进行搜索，转到细节页面，展开可折叠列表，ajax启动一次。我返回到结果页面，单击另一个结果，转到详细信息页面，展开可折叠列表，ajax触发两次，等等。每次我展开可折叠列表，ajax触发一次……因此，如果我查看10个结果，ajax触发10次

动态页面似乎在DOM中积累，每次我单击可折叠列表时，它都会触发在DOM中构建的所有选择器（至少这是我的理论）

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

我正在使用jQueryMobile 1.0.1和jQuery1.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);
});

$（'form#searchcompanys'）。提交（函数（事件）{
getSearchResultsCompanies（）；
返回false；
});
函数getSearchResultsCompanies（）{
$.ajax({
类型：“POST”，
url:baseURL+“server/searchcompanys.php”，
数据：$（“表单#搜索公司”）.serialize（），
数据类型：“json”，
成功：功能（结果）{
$（“#公司列表li”）.remove（）；
对于（var i=0；i”）；
}
$（“#公司列表”）.listview（“刷新”）；
}
});
返回false；
}
$（'.companyDetail'）.live（'click'，函数（事件）{
//保存companyid，以便我们可以在详细信息页面上引用它
var companyid=$（this.attr（'data-uid'）；
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;
    });
});

$（'#companyDetailPage'）.live（'pageshow'，函数（事件）{
var companyid=localStorage.getItem（'thisCompanyId'）；
$.ajax({
类型：“POST”，
url:baseURL+'server/getCompanyDetail.php？companyid='+companyid，
数据：{companyid:companyid}，
数据类型：“json”，
成功：职能（公司）{
美元。每个（公司、职能部门）（索引、公司）{
$（'#companyName'）.html（company.companyName）；
//等等…拉入更多数据以填充页面
});
}
});
//这是多次触发的呼叫
$（“#companyContacts”）.live（'expand'，函数（事件）{
$（“#公司联系人列表li”）.remove（）；
$.ajax({
类型：“POST”，
url:baseURL+'server/getCompanyContacts.php？companyid='+companyid，
数据类型：“json”，
成功：功能（结果）{
对于（var i=0；i”+结果[i].LastName+”等…更多数据”；
}
$（“#companyContactList”）.listview（“刷新”）；
}
});
返回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>

联系人（）

---

我到处寻找解决方案，并尝试从不同角度重新编写代码，但我无法解决这个问题。任何帮助都将不胜感激。谢谢。

我建议您在单击页面更改时使用javascript函数调用，而不是使用jquery live。在该函数中编写ajax调用，使其仅被调用一次。希望这有帮助。

我也遇到了这个问题。我尝试了发现的建议，但在尝试后仍然存在多事件触发问题。这是我必须做的其他事情。我把它改成：

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

为此：

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

---

你的建议奏效了！对我来说，唯一的缺点是我想在这种特殊情况下使用“expand”作为我的事件，以及$（“#myButton”）。expand。。。抛出一个错误。因此，为了使用click，我需要检测可折叠元素是扩展的还是收缩的。最后，我读了更多的书，发现jQuery1.7.1实际上可以与jQueryMobile一起使用，所以我使用了“on”而不是“live”。。。我所有的问题都解决了！非常感谢您的建议。我想您的意思是：$（'按钮'）。单击（函数（e）{…是的，这确实有效；除了$（'按钮'）。展开（函数（e）{…不起作用。我最终使用了jquery 1.7.1和'on'而不是'live'，现在一切都运行得很好。谢谢。