如何在 jQuery Mobile 中调用 jquery 函数答案

【问题标题】：How to call jquery function in jQuery Mobile [closed]如何在 jQuery Mobile 中调用 jquery 函数
【发布时间】：2013-11-09 22:46:21
【问题描述】：

我正在使用 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()，我会得到：

【问题讨论】：

是否有任何可能破坏其他代码的 javascript 错误？
听起来mediaelementplayer(); 以某种方式阻止了jQuery Mobile 的事件。您是否在控制台中收到任何错误？
@Omar 是的。我只是这样放置的。
我们不能继续猜测，添加更多细节。
我们不能一直猜测。发布更多代码。

标签： jquery html jquery-mobile mediaelement.js

【解决方案1】：

我过去成功地使用了带有 mediaelement.js 的 jqm（单页应用程序）。我使用它的方式是调用

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>

/*$(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();
    }
});

【讨论】：