.live(“pageshow”..) not working on Phonegap JQuery Mobile

问题

I have following code that uses JQuery Mobile. Point here is that I want some code to be executed when 'pageshow' event is triggered.

All code below works nicely on Chrome. I can see console logs. However when I run this as part of Phonegap application I never get 'pageshow' event triggered.

Have been investigating this for some time now without success. Hopefully someone could explain me why my event is missing and what are needed steps to get this code working on Phonegap.

details.html

<!DOCTYPE html>
<html>
<head>
        <link rel="stylesheet" href="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.css" />
        <script src="http://code.jquery.com/jquery-1.8.2.min.js"></script>
        <script src="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.js">      </script>
        <link rel="stylesheet" href="css/index.css" />
        <!-- cordova -->
        <script src="cordova-2.2.0.js"></script>
</head>
<body>
    <div data-role="page" id="details_page">
      <a href="places.html" data-transition="slide" data-direction="reverse">Back</a>
      <h3>Hi I am second page</h3>
    </div>

    <script src="js/details.js"></script>

</body>
</html>

details.js

$("#details_page").live("pageshow", function() {
    console.log('I am alive! (details.html)');
});

回答1:

You should use the following

$(document).delegate("#details_page", "pageshow", function() {
    console.log("Hello world!");
});

Also note that you can only run code after the deviceready event has been fired.

So with the device ready event it would be like so :

document.addEventListener("deviceready", onDeviceReady, false);

function onDeviceReady() {
    $(document).delegate("#details_page", "pageshow", function() {
        console.log("Hello world!");
    });
}

Hope this helps, Mike

回答2:

you may have solved it by now, but for those stumbled upon this as I did, here is what I've found to solve. live.() has been deprecated in JQuery 1.7 and removed since 1.9. Use on.() instead. I've changed my (ex.) line from:

$('#detailsPage').live('pageshow', function(event) {

to:

$(document).on('pageshow', '#detailsPage', function(event) {

HTH, rash*

回答3:

I think the problem can be that you're calling the JS after the page has been shown.

If that's the problem you just need to put

<script src="js/details.js"></script>

in the head or before the "page" div

来源：https://stackoverflow.com/questions/13840982/livepageshow-not-working-on-phonegap-jquery-mobile

标签

cordova

jquery-mobile