Question

我是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>

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

Answer 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!' );
});

Answer 2

我认为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');
    });

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

警报消息未在jquery移动应用程序中显示

2 个答案: