[英]javascript function does not work within jquery $(document).ready block
I am trying to call a JavaScript
function from an onclick
trigger. 我试图从
onclick
触发器调用JavaScript
函数。
HTML
section: 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 JavaScript
code 和
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 JavaScript
function out of the $(document).ready()
code, it works. 但是如果我将
JavaScript
函数保留在$(document).ready()
代码之外,它就可以工作了。 Following is the relevant code snippet: 以下是相关的代码段:
<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 JavaScript
code snippet work? 1)为什么第一个
JavaScript
代码段不起作用?
2) How can I get the first JavaScript
code snippet working ? 2)如何让第一个
JavaScript
代码段工作?
EDIT : 编辑:
SO FAR AS I KNOW, $(document).ready()
is executed when the web page loads completely. 因为我知道,当网页完全加载时,会执行
$(document).ready()
。 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()
激活?
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). 在第一次测试中,函数
my_func()
只能在ready回调(以及内部其他对象)中使用。 You can't reference it outside. 你不能在外面引用它。
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 :-) 我认识到这可能是一个简单的简单解释:-)
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
Your first snippet doesn't work, because in in the function my_func111
is defined within the local scope of an anonymous function passed as an argument in your $(document).ready
call. 您的第一个代码段不起作用,因为在函数中
my_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: 您可以通过将函数定义放在文档范围内并在ready函数中调用它来修复代码,例如:
function my_func(){
alert("this is an alert");
}
$(document).ready(function(){
my_func();
});
You'll add a global variable isReady
. 您将添加一个全局变量
isReady
。 The $(document).ready
callback section will change it to true
. $(document).ready
回调部分会将其更改为true
。
Both your function and the isReady
variable 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. 您的HTML代码无需更改。 - I changed the names to use JS and HTML conventions, but essentially it's the same as what you originally wrote...
- 我更改了名称以使用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. 我作为旁注:新的JQuery使用
$(function(){
作为$(document).ready(function(){
简写,以便让你更轻松。
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 . 你需要了解封,其上一个很好的教程可以找到这里 。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.