jquery mobile fonction 'live' indéfini dans l'application phonegap

J'essaie d'obtenir ce example fonctionnant avec phonegap 2.7 et jquery mobile 1.3.1. J'ai commencé avec le fichier index.html suivant:jquery mobile fonction 'live' indéfini dans l'application phonegap

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

Et le fichier index.js suivant:

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); 
    } 
};

Pour une raison quelconque, lorsque l'application démarre, je vois une erreur de la console Web qui dit:

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

pour mémoire, je sais que le mobile jquery est chargé avec succès, mais pour une raison quelconque, la fonction est live reconnaît pas ré. Quelqu'un sait ce qui ne va pas?

Source

2013-05-23 Protostome

Live méthode n'existe pas plus dans jQuery 1.9 + il a été dépréciée depuis jQuery 1.7 et il devrait être remplacé par la méthode on.

À partir de jQuery 1.7, la méthode .live() est déconseillée. Utilisez .on() pour attacher des gestionnaires d'événements. Les utilisateurs des anciennes versions de jQuery doivent utiliser .delegate() au lieu de .live().

Cette méthode permet d'associer des gestionnaires d'événements délégués à l'élément de document d'une page, ce qui simplifie l'utilisation des gestionnaires d'événements lorsque le contenu est ajouté dynamiquement à une page. Voir la discussion de événements directs par rapport aux événements délégués dans la méthode .on() pour plus d'informations .

Réécrire la méthode .live() en termes de ses successeurs est simple; ce sont des modèles pour les appels équivalents pour tous trois méthodes de fixation de l'événement ....

Change:

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

à ceci:

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

ou si vous souhaitez déléguer événement :

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

Source

2013-05-23 10:23:16 Gajotres

jquery mobile fonction 'live' indéfini dans l'application phonegap

Répondre

Questions connexes