$ .mobile.changePage无法正常工作

Question

我正在尝试使用$.mobile.changePage但是它不起作用。 这是我的代码

<!DOCTYPE html>
<html>
    <head>
        <title></title>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">    
         <link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.0/jquery.mobile-1.3.0.min.css">
         <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
         <script src="http://code.jquery.com/mobile/1.3.0/jquery.mobile-1.3.0.min.js"></script>
    </head>
    <body>
        <div data-role="page" id="p1">
            <div data-role="header"><h2>DKT</h2></div>
            <div data-role="content">
                <div id="sw1"></div>
                <div id="sw2"></div>
            </div>
            <div data-role="footer">...</div>
        </div>
        <script>
            $.mobile.changePage("#qu");
        </script>
        <div data-role="page" id="qu">
            <div data-role="header"><h2>DKT</h2></div>
            <div data-role="content">
                <fieldset class="ui-grid-a">
                    <div class="ui-block-a"><button>Nein</button></div>
                    <div class="ui-block-b"><button>Kaufen</button></div>
                </fieldset>
            </div>
        </div>
    </body>
</html>

我已经收到错误TypeError: 'undefined' is not an object (evaluating 'i.trigger')

我已经准备尝试将其更改为“ http://www.google.com ”：仍然出现相同的错误

编辑：

谢谢大家。但是问题实际上出在我的代码的另一部分。

Answer 1

将您的jquery代码封装在document.ready处理程序中，如下所示：

$(document).ready(function() {
   $.mobile.changePage("#qu");
});

因为否则您没有花时间加载DOM，因此在尝试获取它时#qu元素不存在。

Answer 2

之后添加您的脚本

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

或在标签结束后

像这样：

 <script>
             $.mobile.changePage("#qu");
         </script>

Answer 3

如下更改代码

<!DOCTYPE html>
<html>
    <head>
        <title></title>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">    
         <link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.0/jquery.mobile-1.3.0.min.css">
         <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
         <script src="http://code.jquery.com/mobile/1.3.0/jquery.mobile-1.3.0.min.js"></script>
    </head>
    <body>
        <div data-role="page" id="p1">
            <div data-role="header"><h2>DKT</h2></div>
            <div data-role="content">
                <div id="sw1"></div>
                <div id="sw2"></div>
            </div>
            <div data-role="footer">...</div>
        </div>
        <script>
            $('#p1').live('pageshow', function(event){
                $.mobile.changePage("#qu");            
            });
        </script>
        <div data-role="page" id="qu">
            <div data-role="header"><h2>DKT</h2></div>
            <div data-role="content">
                <fieldset class="ui-grid-a">
                    <div class="ui-block-a"><button>Nein</button></div>
                    <div class="ui-block-b"><button>Kaufen</button></div>
                </fieldset>
            </div>
        </div>
    </body>
</html>

在您的代码中$.mobile.changePage("#qu"); 在dom启动之前被调用。 您可以使用许多其他事件，例如pagebeforeshow ， pagecreate等。有关更多信息，请查看jQuery Mobile 文档。

确保您没有使用$(doucment).ready(function(){}); 也一样

$ .mobile.changePage无法正常工作

问题描述

谢谢大家。但是问题实际上出在我的代码的另一部分。

3 个解决方案

解决方案1
1 2013-03-19 09:25:45

解决方案2
0 2013-03-19 09:26:22

解决方案3
0 2013-03-19 10:27:19

$ .mobile.changePage无法正常工作

问题描述

谢谢大家。 但是问题实际上出在我的代码的另一部分。

3 个解决方案

解决方案1 1 2013-03-19 09:25:45

解决方案2 0 2013-03-19 09:26:22

解决方案3 0 2013-03-19 10:27:19

谢谢大家。但是问题实际上出在我的代码的另一部分。

解决方案1
1 2013-03-19 09:25:45

解决方案2
0 2013-03-19 09:26:22

解决方案3
0 2013-03-19 10:27:19