Question

我在html页面的页脚中有这段代码

<script type="text/javascript">
// using jQuery
$('video,audio').mediaelementplayer();
</script>

上面的代码是在html页面上添加视频播放器。

现在我已经创建了一个单独的js文件，其中我已经有一些代码行创建了owl滑块，工具提示，数字计数器等。

当我将上述代码添加到separate js file时，它不起作用，相反，当我将其保留在footer of the html page时，它可以正常工作。

Answer 1

尝试将代码放在$(function(){ ... }中。这将在加载DOM时执行（当前您的代码在加载jQuery之前执行，如果您检查JavaScript控制台，您将看到类似$ is not defined的错误）

 $(function(){
     $('video,audio').mediaelementplayer();
 });

或

 $( document ).ready(function() {
     $('video,audio').mediaelementplayer();
 });

您可以了解正在做什么here。 $(function()与$( document ).ready()

相同

Answer 2

你的html（基本上）应该是这样的：

<html>
  <head>
  </head>
  <body>
     <!-- html code here -->

     <!-- add jquery lib -->
     <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
     <!-- your script -->
     <script src="you/file/path.js"></script>
  </body>
</html>

和你的jquery文件：

jQuery(function($) {
    // your functions here
    $('video,audio').mediaelementplayer();
});

Answer 3

您是否有正确链接到页面中单独的js文件，通常位于正文的底部？看起来应该是这样的：

<script type="text/javascript" src="/joyride_odoo_models/static/js/scripts.js"/>

如果您已正确完成，是否尝试清除浏览器缓存？您可能需要这样做来检测新的JavaScript文件。

Answer 4

如何调用外部js文件？
您必须在外部js文件之前添加引用js 你必须在document.ready上添加你的功能。

Answer 5

您可以等到jQuery满载或ready。

实施例

$(document).ready(function($) {
    // Your code goes here
    $('video,audio').mediaelementplayer();
});

此代码位于外部js文件中，然后您需要将该文件包含在HTML

中

<script type="text/javascript" src="path/to/your/js/file"></script>

js代码不在外部文件中工作，但在放置在同一个html页面中时工作文件

5 个答案: