如何在jQuery Mobile中調用jquery函數

Question

我正在使用jQuery Mobile + MediaElement.JS（MP3 jQuery插件）

MP3播放器工作正常。但是當我點擊菜單鏈接時，該頁面將不會導航到其他頁面。我只能看到加載圖標。

$('video,audio').mediaelementplayer(); 

以上是調用MP3播放器的功能。我把它放在</body>的正上方。當我刪除上面的腳本時，我可以導航到其他頁面，但MP3播放器不起作用。

這是我得到的錯誤：

TypeError: $ is not a function $('video,audio').mediaelementplayer();

當我把jquery.js在頭上，在任何圖書館，我得到這個：

最後，如果我改變撥打電話給jQuery('video,audio').mediaelementplayer()我得到這個：

Answer 1

我在過去曾成功使用jqm（單頁應用程序）和mediaelement.js。我已經使用的方式，它是通過調用

var mediaPlayer = new MediaElementPlayer(videoSelector); 
mediaPlayer.play(); 

請看看工作的例子，它可以幫助你，

http://jsfiddle.net/JXdNd/ （該視頻無法播放，由於CDN跨域問題，但它應該在自己的域內很好地工作）

HTML

<div id="home" data-role="page"> 
    <div data-role="header"> 
     <h1>home</h1> 

    </div> <a href="#page1" data-role="button">page1</a> 

</div> 
<div id="page1" data-role="page" data-theme="c"> 
    <div data-role="header"> 
     <h1>page1</h1> 

    </div> 
    <div data-role="content"> 
     <video width="200px" height="200px" id="video-player" class="video-player" controls="control" preload="none"><source type="video/youtube" src="https://www.youtube.com/watch?v=0bzu2pcyvE0"></video> 
     <br/> 
     <br/> 
     <p style='width:200px'>Think Geek</p> 
      <a href="#page2" data-role="button">page2</a> 
<a href="#home" data-role="button" data-direction="reverse" data-icon="back">back</a> 
    </div> 
</div> 
<div id="page2" data-role="page" data-theme="c"> 
    <div data-role="header"> 
     <h1>page2</h1> 
<a href="#page1" data-role="button" data-direction="reverse" data-icon="back">back</a> 

    </div> 
    <div data-role="content"></div> 
</div> 

個

JS

/*$(document).ready(function(){*/ 
$(document).on("pagecreate", function (e, data) { 
    var videoSelector = '#'+$(e.target).attr("id")+' .video-player'; 
    if ($(videoSelector).length>0) { 
     var mediaPlayer = new MediaElementPlayer(videoSelector); 
     mediaPlayer.play(); 
    } 
});