jQuery Mobile 更改页面失败

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

您的 data-role="dialog" 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>