jQuery Mobile的changePage失敗

Question

我遇到的問題做以下簡單的腳本來工作，但它不是：

<div data-role="page" id="targetPage"> 

    <div data-role="content"> 
     <form action="" method="" name="targetForm"> 
      <a id="bt-addTarget" data-role="button" data-icon="plus">Add Target</a> 
     </form> 
    </div><!-- /content --> 

    <div id="addTargetDialog" data-role="dialog"> 
     <div data-role="header" data-theme="d"> 
      <h1>Choose a Target</h1> 
     </div> 
     <div data-role="content" data-theme="c"> 
      <form action="" method="" name="addTargetForm"> 
       <input type="hidden" name="addTarget" value="yes" /> 
       <select name="target"> 
        <option value="test 1">test 1</option> 
        <option value="test 2">test 2</option> 
       </select> 
       <a id="btn-apply" href="target.php" data-role="button" data-theme="b">Apply</a>  
       <a href="target.php" data-role="button" data-rel="back" data-theme="c">Cancel</a> 
      </form> 
     </div> 
    </div> 

    <script> 
     $(document).undelegate("#targetPage", "pageinit").delegate("#targetPage", "pageinit", function() { 
       $('form[name="targetForm"] #bt-addTarget').off('click').on('click', function(e){ 
         e.preventDefault(); 
         $.mobile.changePage("#addTargetDialog"); 
       }); 
     }); 
    </script> 

</div> 

$ .mobile.changePage（ 「＃addTargetDialog」）;被稱作但未能

Answer 1

你數據角色=「對話框」 DIV必須在同一水平原始頁面從那裏它被稱爲：

<div data-role="page" id="targetPage"> 

    <div data-role="content"> 
     <form action="" method="" name="targetForm"> 
      <a id="bt-addTarget" data-role="button" data-icon="plus">Add Target</a> 
     </form> 
    </div><!-- /content --> 
</div> 

<div id="addTargetDialog" data-role="dialog"> 
    <div data-role="header" data-theme="d"> 
     <h1>Choose a Target</h1> 
    </div> 
    <div data-role="content" data-theme="c"> 
     <form action="" method="" name="addTargetForm"> 
      <input type="hidden" name="addTarget" value="yes" /> 
      <select name="target"> 
       <option value="test 1">test 1</option> 
       <option value="test 2">test 2</option> 
      </select> 
      <a id="btn-apply" href="target.php" data-role="button" data-theme="b">Apply</a>  
      <a href="target.php" data-role="button" data-rel="back" data-theme="c">Cancel</a> 
     </form> 
    </div> 
</div> 

<script> 
    $(document).undelegate("#targetPage", "pageinit").delegate("#targetPage", "pageinit", function() { 
      $('form[name="targetForm"] #bt-addTarget').off('click').on('click', function(e){ 
        e.preventDefault(); 
        $.mobile.changePage("#addTargetDialog"); 
      }); 
    }); 
</script> 

工作例如：http://jsfiddle.net/Gajotres/M6Gvz/

編輯：

舊的HTML是這樣的：

<div data-role="page" id="targetPage"> 
    <div data-role="content"> 
      ... 
    </div> 

    <div id="addTargetDialog" data-role="dialog"> 
      ... 
    </div><!-- end dialog --> 

    <script> 
      ... 
    </script> 
</div> <!-- end targetPage --> 

新的HTML正在尋找這樣的：

<div data-role="page" id="targetPage"> 
    <div data-role="content"> 
      ... 
    </div> 
</div><!-- end targetPage --> 

<div id="addTargetDialog" data-role="dialog"> 
     ... 
</div><!-- end dialog --> 

<script> 
     ... 
</script> 

如果你想知道如何在您的網頁實現這一點。

如果你有多個HTML頁面做這樣的：

HTML 1 

    <div>PAGE 1</div> 
    <div>DIALOG 1</div> 
    <script>PAGE 1</script> 

HTML 2 

    <div>PAGE 2</div> 

HTML 3 

    <div>PAGE 3</div> 

如果你有1個HTML多頁做這樣的：

HTML 1 

    <div>PAGE 1</div> 
    <div>PAGE 2</div> 
    <div>PAGE 3</div> 
    <div>PAGE 4</div> 
    <div>PAGE 5</div> 
    <div>DIALOG 1</div> 
    <script>PAGE 1</script>