Question

我试图让这个example使用phonegap 2.7和jquery mobile 1.3.1。我从以下index.html文件开始：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <meta name="format-detection" content="telephone=no" />
        <meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width, height=device-height, target-densitydpi=device-dpi" />
        <link rel="stylesheet" type="text/css" href="css/index.css" />
        <link rel="stylesheet" type="text/css" href="css/jquery.mobile-1.3.1.min.css" />

        <title>Hello World</title>
        <script type="text/javascript" src="js/lib/jquery/jquery-1.9.1.min.js"></script>
        <script type="text/javascript" src="js/lib/jquery-mobile/jquery.mobile-1.3.1.min.js"></script>
        <script type="text/javascript" src="cordova-2.7.0.js"></script>
        <script type="text/javascript" src="js/index.js"></script>
        <script type="text/javascript">
            app.initialize();           
        </script>
    </head>
    <body>
        <div data-role="page" data-theme="a" id="page-home">
            <div data-role="header" data-nobackbtn="true" data-theme="e">
                <h1>Hello world app</h1>
            </div> <!-- /header -->

            <div data-role="content" id="content-manual" data-theme="a">

            <div data-role="button" id="playaudio" data-theme="e">Play</div>
            <div data-role="button" id="pauseaudio" data-theme="e">Pause</div>
            <div data-role="button" id="stopaudio" data-theme="e">Stop</div>    

            <div class="ui-grid-a">
                <div class="ui-block-a"> Current: <span id="audio_position">0 sec</span></div>
                <div class="ui-block-b">Total: <span id=media_dur>0</span> sec</div>
            </div><!-- /grid-a -->

    </div>
</div> 
</body>
</html>

以下index.js文件：

var app = {
    // Application Constructor
    initialize: function() {
        this.bindEvents();
    },
    // Bind Event Listeners
    //
    // Bind any events that are required on startup. Common events are:
    // 'load', 'deviceready', 'offline', and 'online'.
    bindEvents: function() {
        document.addEventListener('deviceready', this.onDeviceReady, false);
    },
    // deviceready Event Handler
    //
    // The scope of 'this' is the event. In order to call the 'receivedEvent'
    // function, we must explicity call 'app.receivedEvent(...);'
    onDeviceReady: function() {
        app.receivedEvent('deviceready');
        $('#page-home').live('pageinit',function(){
            console.log("Hello world!");
            $("#playaudio").live('tap', function() {
                // Note: two ways to access media file: web and local file        
                var src = 'http://audio.ibeat.org/content/p1rj1s/p1rj1s_-_rockGuitar.mp3';

                // local (on device): copy file to project's /assets folder:
                // var src = '/android_asset/spittinggames.m4a';

                playAudio(src);
            });

            $("#pauseaudio").live('tap', function() {
                pauseAudio();
            });

            $("#stopaudio").live('tap', function() {
                stopAudio();
            });
        });

    },
    // Update DOM on a Received Event
    receivedEvent: function(id) {
//        var parentElement = document.getElementById(id);
//        var listeningElement = parentElement.querySelector('.listening');
//        var receivedElement = parentElement.querySelector('.received');
//
//        listeningElement.setAttribute('style', 'display:none;');
//        receivedElement.setAttribute('style', 'display:block;');
//
        console.log('Received Event: ' + id);
    }
};

出于某种原因，当应用程序启动时，我看到来自Web控制台的错误说明：

TypeError: Result of expression '$('#page-home').live' [undefined] is not a function. at file:///android_asset/www/js/index.js:44

对于记录，我知道jquery mobile已成功加载，但由于某种原因，live功能无法识别。谁知道什么是错的？

Answer 1

Live 方法在jQuery 1.9中不再存在+自jQuery 1.7以来已被弃用，它应该替换为方法 on

从jQuery 1.7开始，不推荐使用.live（）方法。使用.on（）来   附加事件处理程序。旧版jQuery的用户应该使用   .delegate（）优先于.live（）。

此方法提供了一种将委托事件处理程序附加到的方法   页面的文档元素，简化了事件处理程序的使用   将内容动态添加到页面时。参见讨论   .on（）方法中的直接与委托事件有关的更多信息   信息。

根据其后继者重写.live（）方法   直截了当;这些是用于所有人的等效呼叫的模板   三种事件依恋方法......

变化：

$("#pauseaudio").live('tap', function() {
    pauseAudio();
});

到此：

$("#pauseaudio").on('tap', function() {
    pauseAudio();
});

或者如果你想委托事件：

$(document).on('tap','#pauseaudio' , function() {
    pauseAudio();
});

jquery mobile'live'函数在phonegap应用程序中未定义

1 个答案: