0

我是 jquery 和 jquery mobile 的新手。我目前正在尝试创建一个简单的移动应用程序，一旦加载页面，就会显示一条警报消息。按照建议，我在 html 文件的 head 部分中添加了以下代码：

<link rel="stylesheet" href="jquery.mobile-1.3.0.min.css" />
<script type="text/javascript" src="jquery-1.9.1.min.js"></script>
<script type="text/javascript">
    $('#chart').live('pageinit', function() {
        alert('jQuery Mobile: pageinit for Config page');
    });
</script>
<script type="text/javascript" src="jquery.mobile-1.3.0.min.js"></script>

在正文部分，我按预期添加了图表页面的代码：

<div data-role="page" data-theme="b" id="chart">
    <div data-role="header" data-position="fixed">
        <a href="#main-page" data-icon="arrow-r" data-iconpos="left" data-transition="slide" data-direction="reverse">Back</a>
        <h1>Year Chart</h1>
    </div>

    <div data-role="content">
        <div id="container"></div>
    </div>
    <div data-role="footer" data-position="fixed">
        <div data-role="navbar">

        </div>
    </div>
</div>

但是，当图表页面在我的计算机（不是手机）的浏览器中加载时，不会显示任何警报消息。有谁知道问题可能出在哪里？提前致谢！

4

2 回答 2

1

这是我可以在我的所有浏览器（IE、chrome、firefox）中成功发出警报的完整 HTML 和代码。我猜你的一些 javascript 不存在或错字。尝试使用 CDN。

<html>
    <head>
        <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.8.2.min.js"></script>
        <script src="http://code.jquery.com/mobile/1.3.0/jquery.mobile-1.3.0.min.js"></script>
        <script type="text/javascript">
            $( '#chart' ).live( 'pageinit',function(event){
              alert( 'This page was just enhanced by jQuery Mobile!' );
            });
        </script>
    </head>
    <body>
        <div data-role="page" data-theme="b" id="chart">
            <div data-role="header" data-position="fixed">
                <a href="#main-page" data-icon="arrow-r" data-iconpos="left" data-transition="slide" data-direction="reverse">Back</a>
                <h1>Year Chart</h1>
            </div>
            <div data-role="content">
                <div id="container"></div>
            </div>
            <div data-role="footer" data-position="fixed">
                <div data-role="navbar">
                </div>
            </div>
        </div>
    </body>
</html>

更新：

如果您使用的是 jquery 1.9+，我们应该使用 .on 而不是 .live。这是因为 .live 已从 1.9 中删除。http://api.jquery.com/live/ 因此，如果您使用的是 1.9，代码应该像这样更改

$( document ).on( 'pageinit','#chart', function(event){
  alert( 'This page was just enhanced by jQuery Mobile!' );
});
于 2013-02-26T14:46:54.723 回答
0

我认为 jQuery Mobile 页面事件（如 pageInit）不会在页面外冒泡。尝试像这样在页面 div 中插入脚本标签

<div data-role="page" data-theme="b" id="chart">
    <div data-role="header" data-position="fixed">
        <a href="#main-page" data-icon="arrow-r" data-iconpos="left" data-transition="slide" data-direction="reverse">Back</a>
        <h1>Year Chart</h1>
    </div>

    <div data-role="content">
        <div id="container"></div>
    </div>
    <div data-role="footer" data-position="fixed">
        <div data-role="navbar">

        </div>
    </div>
    <script type="text/javascript">
        $('#chart').live('pageinit', function() {
            alert('jQuery Mobile: pageinit for Config page');
        });
    </script>
</div>

或者，您可以将 pageInit 函数绑定到文档元素，如下所示：

$(document).live('pageinit', function() {
        alert('jQuery Mobile: pageinit for Config page');
    });

但我认为第一个解决方案更符合最佳实践

于 2013-02-26T14:37:38.053 回答