javascript 函数在 jquery $(document).ready 块中不起作用

javascript function does not work within jquery $(document).ready block

提问by Istiaque Ahmed

I am trying to call a JavaScriptfunction from an onclicktrigger.

我正在尝试JavaScript从onclick触发器调用函数。

HTMLsection:

HTML部分：

<div class="my_radio">
    <input type="radio" name="my_radio" value="1" onclick="my_func()"/>  first button
</div><!-- end of class my_radio -->

And the JavaScriptcode

和JavaScript代码

<script type="text/javascript">
    $(document).ready(function(){
        function  my_func(){
            alert("this is an alert");
        }
    });
</script>

It does not work.

这是行不通的。

But if i keep the JavaScriptfunction out of the $(document).ready()code, it works. Following is the relevant code snippet:

但是，如果我将JavaScript功能排除在 $(document).ready()代码之外，它就可以工作。以下是相关的代码片段：

<script type="text/javascript">
    $(document).ready(function(){
        function  my_func111(){
            alert("this is an alert");
        }
    });

    function  my_func(){
        alert("this is an alert");
    }
</script>

1) Why does not the first JavaScriptcode snippet work?

1）为什么第一个JavaScript代码片段不起作用？

2) How can I get the first JavaScriptcode snippet working ?

2）我怎样才能让第一个JavaScript代码片段工作？

EDIT :

编辑 ：

SO FAR AS I KNOW, $(document).ready()is executed when the web page loads completely. So how can I prevent my_func()to be active before or after the complete page-loading if I write my_func()outside $(document).ready()?

据我所知，$(document).ready()在网页完全加载时执行。那么，my_func()如果我my_func()在外面写，如何防止在完成页面加载之前或之后处于活动状态$(document).ready()？

回答by Didier Ghys

It's all about javascript execution contexts and scope.

这都是关于 javascript 执行上下文和范围的。

Everything that you define within a function is know only in this function.

您在函数中定义的所有内容仅在该函数中才知道。

In your first test, the function my_func()can only be used within the ready callback (and in the inner other objects). You can't reference it outside.

在您的第一个测试中，该函数my_func()只能在就绪回调（以及内部其他对象）中使用。你不能在外面引用它。

In your second example, the function my_func()is global to the document and accessible from anywhere.

在您的第二个示例中，该函数my_func()对于文档是全局的，并且可以从任何地方访问。

I recognize this is maybe a verry simple explanation :-)

我承认这可能是一个非常简单的解释:-)

回答by Sgoettschkes

If you define your function within a callback, you can only use it within this callback:

如果您在回调中定义函数，则只能在此回调中使用它：

$(document).ready(function(){
  function something(){
    alert('test');
  }

  //..

  something(); // Will work
}

something(); // Won't work

回答by jsalonen

Your first snippet doesn't work, because in in the function my_func111is defined within the local scope of an anonymous functionpassed as an argument in your $(document).readycall.

您的第一个代码段不起作用，因为函数中的 inmy_func111是在作为调用参数传递的匿名函数的本地范围内定义的$(document).ready。

You can fix your code by placing the function definition to the document scope and calling it inside ready function such as:

您可以通过将函数定义放置到文档范围并在就绪函数中调用它来修复您的代码，例如：

function my_func(){
   alert("this is an alert");    
}

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

回答by majelbstoat

I presume by "it does not work", you mean it says "my_func is not defined" or similar?

我假设“它不起作用”，你的意思是它说“my_func 未定义”或类似的？

When you define a function within a function, the inner function is not visible outside of the outer function (unless it is part of the outer function's return statement).

当您在函数内定义函数时，内部函数在外部函数之外是不可见的（除非它是外部函数的 return 语句的一部分）。

You'll need to learn about closures, a good tutorial on which can be found here.

你需要了解封，其上一个很好的教程可以找到这里。

回答by pashute

You'll add a global variable isReady. The $(document).readycallback section will change it to true.

您将添加一个全局变量isReady。该$(document).ready回调节将其更改为true。

Both your function and the isReadyvariable must be defined outside the callback of the $(document).ready, so that they can be seen from outside the scope of the callback.

您的函数和isReady变量都必须在 的回调之外定义$(document).ready，以便可以从回调范围之外看到它们。

<script type="text/javascript">
var isReady = false;    // outside the onReady callback

function  myFunc(){     // also outside the onReady callback
    if (!isReady) return; // abort if not ready

    alert("this is an alert");
}


// the onReady callback
$(function(){  // the newer jquery shorthand for: (document).ready(function(){
    isReady = true;
});

</script>

Your HTML code needs no changes. - I changed the names to use JS and HTML conventions, but essentially it's the same as what you originally wrote...

您的 HTML 代码无需更改。- 我更改了名称以使用 JS 和 HTML 约定，但本质上它与您最初编写的相同...

<div class="divMyRadio">

<input type="radio" id="myRadio" value="1" onclick="myFunc()"/>  first button

</div><!-- end of class divMyRadio -->

I As a side note: The newer JQuery uses $(function(){as shorthand for $(document).ready(function(){to make things easier for you.

I 作为旁注：较新的 JQuery$(function(){用作简写，$(document).ready(function(){以便让您更轻松。