alert message not displayed in jquery mobile application

问题

I am new to jquery and jquery mobile. I am currently trying to create a simple mobile application that, once a page is loaded, displays an alert message. I have added in the head section of the html file, as suggested, the following code:

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

In the body section I have added, as expected, the code for the chart page:

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

However, when the chart page is loaded in the browser of my computer (not the phone), no alert message is displayed. Does anyone know where the problem may lie? Thanks in advance!

回答1:

Here is the full HTML and code that I can success alert in my all browser(IE, chrome, firefox). I guess some of your javascript are not exist or typo. Try to use 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>

UPDATED:

If you are using jquery 1.9+, we should use .on instead of .live. It is because .live has been removed from 1.9. http://api.jquery.com/live/ So, the code should change like this if you are using 1.9

$( document ).on( 'pageinit','#chart', function(event){
  alert( 'This page was just enhanced by jQuery Mobile!' );
});

回答2:

I think that jQuery Mobile page events (like pageInit) don't bubble outside the page. Try to insert the script tag inside the the page div like this

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

Alternatively you can bind the pageInit function to the document element like this:

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

But I think the first solution is more inline with the best practices

来源：https://stackoverflow.com/questions/15091674/alert-message-not-displayed-in-jquery-mobile-application

标签

javascript

jquery-mobile