2


我试图让这个示例与 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功能无法识别。有谁知道出了什么问题？

4

1 回答 1

7

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();
});
于 2013-05-23T10:23:16.993 回答