logo标签列表

如何从HTML中调用jQuery代码中的外部函数？

javascriptjqueryhtmlfunction
7
我需要加载函数，从包含在HTML文件中的外部JS中获取数据，并且我正在这样做：
<body onLoad="getTicket();">
......
</body>

或者这个：
<html>
<body>
    <head>
    <script src="js/jquery.js" type="text/javascript"></script>
    <script src="js/functions.js" type="text/javascript"></script>
    <script>
        $(document).ready(function() {
            getTicket();
        });
    <script>
    </head>
<body>
</html>

或者这个：
<html>
<body>
    <head>
    <script src="js/jquery.js" type="text/javascript"></script>
    <script src="js/functions.js" type="text/javascript"></script>
    <script>
        getTicket();
    <script>
    </head>
<body>
</html>

我有一个 functions.JS 文件包含以下内容：

functioOne() {

}

functionTwo() {

}

$(document).ready(function() {
    ...
    .....
    function getTicket() {
        //to do
    }
});

但是它不起作用，在控制台中显示如下内容：
Uncaught ReferenceError: getTicket is not defined

敬礼。

你是如何将外部JS文件包含到HTML文件中的？ - yogi
你使用的是哪个浏览器？它是否在控制台中产生错误？如果 functions.js 文件中存在解析错误，浏览器可能会“跳过”文件的其余部分，导致 getTicket() 函数未被定义。 - thaJeztah
<head>标签必须放在<body>标签之前 - 特别是当你想要使用&lt;body onLoad=&quot;getTicket();&quot;&gt;时。 - biberman
5个回答
9

您的getTicket函数仅在jQuery闭包（匿名函数）的上下文范围内定义。请在全局范围内定义它（文件的其他位置，而不是“函数参数”中）。

如果需要该范围内的变量，请将其封装在命名空间（对象）中，或将其声明为window.getTicket = function() { /* ... */}。

5
尝试将function getTicket(){}放在doc ready外面：
functio One() {

}

function Two() {

}
function getTicket() {
    //to do
}

$(document).ready(function() {
...
.....
   getTicket();
});

你的引入顺序完美无缺，没有任何问题。

<script src="js/jquery.js" type="text/javascript"></script>
<script src="js/functions.js" type="text/javascript"></script>

这是完全没问题的。

问题是getTicket()包含了jQuery代码，因此我无法进行输出。 - SoldierCorp
我认为不应该有任何问题，但你可以尝试一下。 - Jai
@SoldierCorp，“ready”部分的文档只是确保在您的jQuery运行之前DOM已经被填充。您可以在其外定义代码，只要它还没有被调用即可。（现在是否应该这样做是另一个问题） - DrLivingston
4
你可以这样做：
$(document).ready(function() {
  ...
  .....
  window.getTicket = function() {
    //to do
  } 
});

一旦文档准备就绪，您将能够调用getTicket函数。

你的意思是，我把那段代码放在外部js文件里还是html文件里？ - SoldierCorp
谢谢，你的例子帮助我理解了这个概念。 - ZEESHAN ARSHAD
0

在调用函数之前，您必须先包含JS文件。如果您这样做：

<html>
<body>
    <head>
    <!-- include script files here.(jquery and custom script files) -->
    <script>
        $(document).ready(function() {
            getTicket();
        });
    </script>
    </head>
<body>
</html>

在调用函数之前，您必须先包含脚本文件。

1
显然，我已经拥有它，这是你应该做的第一件事。 - SoldierCorp
0

在标签中添加<script type="text/javascript src="external.js"></script>。

然后等待文档完全加载。

问题是您的代码以这种方式执行：

  • 执行external.js
  • 因为文档尚未完成加载，所以您的函数未定义
  • 调用未定义的函数
  • 文档已准备好

我个人认为在$(document).ready内部定义一个函数不是一个好主意。更简单的方法是正常定义该函数，然后在$(document).ready内部调用它。

当你的回答只是“添加脚本标签”时，我给你点了一个负分（这与函数作用域是闭包的问题无关，这意味着他永远看不到它）。现在你已经编辑过了，所以我取消了负分。 - Camilo Martin
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接