選択変更のページを変更する

Question

私はjQuery Mobileを使用しており、選択ドロップダウンといくつかのjQueryを使用してページを正しく変更する方法を見つけようとしています。私が抱えている問題は、コンテンツのページが読み込まれることですが、選択した値を切り替えると、ページが複数回読み込まれます。私はそれが最後の選択からのページの内容がまだDOMに存在するためだと仮定していますか？ここで私がこれまで持っているものです。

のjQuery：

$(document).ready(function() { 
    $("select[name=ProjectID]").change(function() { 
     var projectID = $(this).val(); 
     window.location.hash = "/tasks.cfm?pid=" + projectID; 
    }); 
}); 

HTML：

<select name="ProjectID"> 
    <option value="1">Project 1</option> 
    <option value="2">Project 2</option> 
</select> 

）（$ .mobile.changePageを使用してみましたが、同じ結果を見ました。これを回避する方法はありますか？

Answer 1

私はこのようにそれについて行くでしょう：

• http://jsfiddle.net/TrghW/1/

JS

$('.navigateToPage').change(function() { 
    var page = $(this).val(); 
    $.mobile.changePage("#"+page, { transition: "slideup"}); 
}); 

HTML

<div data-role="page" id="home"> 
    <div data-role="content">   
     <label for="pages" class="select">Navigate to page:</label> 
     <select name="pages" id="selectPages" class="navigateToPage"> 
      <option>Select a Page</option> 
      <option value="page2">Page 2</option> 
      <option value="page3">Page 3</option> 
      <option value="page4">Page 4</option> 
      <option value="page5">Page 5</option> 
     </select> 
     <br /> 
     <span>This is the Home Page</span>  
    </div> 
</div> 

<div data-role="page" id="page2"> 
    <div data-role="content">   
     <label for="pages2" class="select">Navigate to page:</label> 
     <select name="pages2" id="selectPages2" class="navigateToPage"> 
      <option>Select a Page</option> 
      <option value="home">Home Page</option> 
      <option value="page3">Page 3</option> 
      <option value="page4">Page 4</option> 
      <option value="page5">Page 5</option> 
     </select> 
     <br /> 
     <span>This is Page 2</span> 
    </div> 
</div> 

<div data-role="page" id="page3"> 
    <div data-role="content">   
     <label for="pages3" class="select">Navigate to page:</label> 
     <select name="pages3" id="selectPages3" class="navigateToPage"> 
      <option>Select a Page</option> 
      <option value="home">Home Page</option> 
      <option value="page2">Page 2</option>   
      <option value="page4">Page 4</option> 
      <option value="page5">Page 5</option> 
     </select> 
     <br /> 
     <span>This is Page 3</span>  
    </div> 
</div> 

<div data-role="page" id="page4"> 
    <div data-role="content">   
     <label for="pages4" class="select">Navigate to page:</label> 
     <select name="pages4" id="selectPages4" class="navigateToPage"> 
      <option>Select a Page</option> 
      <option value="home">Home Page</option> 
      <option value="page2">Page 2</option>   
      <option value="page3">Page 3</option> 
      <option value="page5">Page 5</option> 
     </select> 
     <br /> 
     <span>This is Page 4</span>  
    </div> 
</div> 

<div data-role="page" id="page5"> 
    <div data-role="content">   
     <label for="pages5" class="select">Navigate to page:</label> 
     <select name="pages5" id="selectPages5" class="navigateToPage"> 
      <option>Select a Page</option> 
      <option value="home">Home Page</option> 
      <option value="page2">Page 2</option>   
      <option value="page3">Page 3</option> 
      <option value="page4">Page 4</option> 
     </select> 
     <br /> 
     <span>This is Page 5</span>  
    </div> 
</div>