Javascript 如何从html调用jquery代码中的外部函数?

声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow 原文地址: http://stackoverflow.com/questions/14908543/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me): StackOverFlow

提示:将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间:2020-08-24 18:17:33  来源:igfitidea点击:

How to call external function inside jquery code from html?

javascriptjqueryhtmlfunction

提问by SoldierCorp

I need to load function to get data from external JS included in HTML file, and I'm doing this:

我需要加载函数以从 HTML 文件中包含的外部 JS 获取数据,我正在这样做:

<body onLoad="getTicket();">
......
</body>

or this:

或这个:

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

or this:

或这个:

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

And I have this in functions.JS:

我在functions.JS中有这个:

functioOne() {

}

functionTwo() {

}

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

But does'nt work and in the console display this:

但不起作用,并在控制台中显示:

Uncaught ReferenceError: getTicket is not defined 

Regards.

问候。

回答by Camilo Martin

Your getTicketfunction is defined only in the context (scope) of the jQuery closure (anonymous function). Define it in the global scope instead (elsewhere in the file and not as a "function parameter").

您的getTicket函数仅在 jQuery 闭包(匿名函数)的上下文(范围)中定义。而是在全局范围内定义它(在文件中的其他地方,而不是作为“函数参数”)。

If you need variables from that scope, encapsulate them in a namespace (an object), or declare it as window.getTicket = function() { /* ... */}.

如果您需要该范围内的变量,请将它们封装在命名空间(一个对象)中,或将其声明为window.getTicket = function() { /* ... */}.

回答by sdepold

you could do this:

你可以这样做:

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

once the document is ready, you will be able to call getTicket

一旦文件准备好,您就可以调用 getTicket

回答by Jai

Try putting the function getTicket(){}outside or the doc ready:

尝试将function getTicket(){}外部或doc ready

functio One() {

}

function Two() {

}
function getTicket() {
    //to do
}

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

Your order of inclusion is perfect no issues with that.

您的包含顺序是完美的,没有问题。

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

This is perfectly fine.

这完全没问题。

回答by Harish Anchu

You must include the js file before calling the function. If you do This:

您必须在调用该函数之前包含 js 文件。如果你这样做:

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

you must include your script file before calling the function.

在调用该函数之前,您必须包含您的脚本文件。

回答by collimarco

Add <script type="text/javascript src="external.js"></script>to head.

添加<script type="text/javascript src="external.js"></script>head.

Then you have to wait for the document to be fully loaded.

然后您必须等待文档完全加载。

The problem is that your code gets executed this way:

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

  • execute external.js
  • your function is not defined because the document hasn't finished loading
  • you call the undefined function
  • the document is ready
  • 执行 external.js
  • 您的函数未定义,因为文档尚未完成加载
  • 你调用未定义的函数
  • 文件准备好了

IMHO I don't think is a good idea to define a function inside $(document).ready. It would be simpler to normally define that function, then callit inside $(document).ready.

恕我直言,我认为在 $(document).ready 中定义一个函数不是一个好主意。通常定义该函数会更简单,然后在 $(document).ready 中调用它。