Jquery Mobile - 동적 페이지 DOM에 누적

Question

검색을 수행하고 결과를 표시 한 다음 결과를 클릭하여 동적 세부 정보 페이지로 이동할 수있는 간단한 Jquery Mobile 애플리케이션을 작성 중입니다. 세부 정보 페이지에는 아약스 호출을 사용하여 내용을 가져 오는 접을 수있는 목록이 있습니다.

표면에서 잘 작동하는 것처럼 보이지만 Firebug로 검사 할 때마다 세부 정보 페이지로 이동하고 접을 수있는 목록을 확장 할 때마다 아약스가 여러 번 실행됩니다.

예를 들어, 검색을 수행하고 세부 정보 페이지로 이동하여 접을 수있는 목록을 확장하고 아약스를 한 번 실행합니다. 결과 페이지로 돌아가 다른 결과를 클릭하고 세부 정보 페이지로 이동 한 다음 접을 수있는 목록을 펼치고 아약스를 두 번 발사합니다. 접을 수있는 목록을 확장 할 때마다 아약스는 한 번 더 실행합니다. 10 개의 결과를 보면 아약스가 10 번을 발사합니다.

동적 페이지가 DOM에 누적되어 있고 접을 수있는 목록을 클릭 할 때마다 DOM에 구축 된 모든 선택기에서 실행되는 것 같습니다 (적어도 내 이론).

내 아약스가 여러 번이 아니라 한 번만 발생하도록하려면 어떻게해야합니까?

Jquery Mobile 1.0.1을 Jquery 1.6.4와 함께 사용하고 있습니다. 나는 데이터를 얻기 위해 PHP를 사용하고있다. 이 같은 모습을 채워됩니다

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

다음

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

가 세부 정보 페이지에 대한 코드입니다 :

다음은 검색 페이지 내 코드입니다

해상도가 높거나 낮음을 검색하고 다양한 각도에서 코드 재 작업을 시도했지만 그렇게 할 수는 없습니다. 이 문제가 생겼다. 어떤 도움을 주시면 감사하겠습니다. 감사.

Answer 1

을하는 데 도움이 당신이 그 기능에 아약스 호출의 호출 된 있도록 change.Write 페이지에 대한 클릭 할 때 자바 스크립트 함수 호출을 사용하는 것이 좋습니다 싶습니다 나도이 문제가 있었다. 나는 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를 사용하는 것보다 난 단지 once.Hope이