提示消息不显示在jquery移动应用程序中

我是jquery和jquery mobile的新手。我目前正在尝试创建一个简单的移动应用程序，一旦加载页面，就会显示一条警告消息。我在HTML文件的头部有加，作为建议，下面的代码：提示消息不显示在jquery移动应用程序中

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

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

来源

2013-02-26 Anto

这里是完整的HTML和代码，我可以在我的所有浏览器（IE浏览器，铬，火狐）成功警报。我想你的一些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+，我们应该使用的.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-26 14:46:54 Derek

完成，但没有任何显示，谢谢 – Anto 2013-02-26 15:32:06

如何复制我的代码并在浏览器中运行？ – Derek 2013-02-26 15:34:26

Derek，我使用的是1.9.1版本（jquery-1.9.1.min.js），这似乎是问题所在：1.8.2版本出现警告，1.9.1不做任何事情。你能证实吗？ – Anto 2013-02-26 15:57:56

我认为，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-26 14:37:38 seberenimer

我已经试过两种方式并没有什么似乎表明了这样的改变。它可能是一个浏览器相关的问题？ – Anto 2013-02-26 14:43:35

您使用哪个浏览器和版本？但它不应该相关。 – Derek 2013-02-26 14:45:18

提示消息不显示在jquery移动应用程序中

回答

相关问题