提示消息不顯示在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移動應用程序中

回答

相關問題