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

Question

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

表面上看起来工作正常，但是当我使用 Firebug 检查它时，我注意到每次您转到详细信息页面并展开可折叠列表时，ajax 都会触发多次。

因此，例如，我进行搜索，转到详细信息页面，展开可折叠列表，ajax 触发一次。我回到结果页面，点击另一个结果，进入详细页面，展开可折叠列表，ajax 触发两次，等等。每次我展开可折叠列表，ajax 再触发一次......所以如果我查看 10 个结果，ajax 会触发 10 次。

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

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

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

我也有这个问题。我尝试了找到here 的建议，但尝试此操作后仍然存在多事件触发问题。这是我必须做的其他事情。我从这里改变了它：

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

到这里：

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

Answer 2

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