1

以下の簡単なスクリプトを機能させるのに問題がありますが、そうではありません。

<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"）; 呼び出されましたが失敗しました

4

1 に答える 1

3

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>
于 2013-01-18T13:47:03.873 に答える