Javascript 为什么我不能使用 onClick 在 jQuery $(document).ready 函数中执行函数？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/3371632/
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
Why can't I use onClick to execute a function inside a jQuery $(document).ready function?
提问by jalperin
I'm new to Javascript and jQuery. I want to click a button and have a js function executed. (For this example, it's just an alert, but it's actually an ajax function.)
我是 Javascript 和 jQuery 的新手。我想单击一个按钮并执行一个 js 函数。（对于这个例子，它只是一个警报，但它实际上是一个 ajax 函数。）
The first alert appears, but after I click the button, I never see the second ("did it") alert. It looks like javascript doesn't think the doIt() function is defined when the button is clicked.
第一个警报出现，但在我单击按钮后，我再也没有看到第二个（“做到了”）警报。看起来 javascript 认为单击按钮时没有定义 doIt() 函数。
Here's the relevant code:
这是相关的代码：
$(document).ready(function()
{
alert('ready');
function doIt() {
alert('did it');
};
}
)
<body>
<input name="Go" type="button" value="Go" onclick="doIt();"/>
</body>
回答by Nick Craver
It's because that function isn't in a global context, which is where your onclick=""is looking for it. You need to move it outside your document.ready(so it's not scoped exclusively to that closure), or (a better approach IMO) bind it inside the document.ready, here's what I mean by each:
这是因为该函数不在全局上下文中，而这正是您onclick=""要查找的地方。你需要把它移到你的外面document.ready（所以它不只限于那个闭包），或者（一个更好的方法 IMO）将它绑定在里面document.ready，这就是我的意思：
Binding it inside (remove your onclick=""for this):
将其绑定在内部（onclick=""为此删除您的）：
$(document).ready(function() {
alert('ready');
$("input[name='Go']").click(doIt);
function doIt() {
alert('did it');
}
});
or the anonymous version (again remove your onclick=""):
或匿名版本（再次删除您的onclick=""）：
$(document).ready(function() {
alert('ready');
$("input[name='Go']").click(function() {
alert('did it');
});
});
Or move it outside (keep your onclick=""):
或者把它移到外面（保留你的onclick=""）：
$(document).ready(function() {
alert('ready');
});
function doIt() {
alert('did it');
}
回答by Konerak
You define doIt in your document.ready as a function statement.
您在 document.ready 中将 doIt 定义为函数语句。
Either you should use a function expressionor declare the function out of the ready function.
您应该使用函数表达式或从就绪函数中声明函数。
$(document).ready(function()
{
alert('ready');
doIt = function() { //now has global scope.
alert('did it');
};
}
)
<body>
<input name="Go" type="button" value="Go" onclick="doIt();"/>
</body>
(yes, the onClick is not really the jQuery way of doing it and probably should be replaced by a click handler defined in the ready function, but it works and is allowed.
（是的， onClick 并不是真正的 jQuery 方式，可能应该由 ready 函数中定义的点击处理程序替换，但它可以工作并且被允许。
回答by Paul Dragoonis
What you need to do is bind a "click" event to it using jquery like this.
您需要做的是使用这样的 jquery 将“单击”事件绑定到它。
jQuery(document).ready(function($) {
$('#my_button').click(function() {
alert('i was clicked');
});
});
<input type="button" id="my_button" value="Go" />
Here is a live jsfiddle demo for you: http://jsfiddle.net/8A5PR/
这是一个实时的 jsfiddle 演示：http: //jsfiddle.net/8A5PR/
Here is the manual page for you: http://api.jquery.com/click/
这是您的手册页：http: //api.jquery.com/click/
回答by Matt Briggs
Javascript has two kinds of scope, global, and function level. If you declare doIt inside a function, it will not be visible outside the function. There are a few ways to fix it
Javascript 有两种作用域，全局和函数级。如果在函数内部声明 doIt，它将在函数外部不可见。有几种方法可以修复它
//just declare the function outside the ready function
$(function() {
});
function doIt() { alert('did it'); }
//decare a variable outside the function
var doIt;
$(function() {
doIt = function() { alert('did it'); }
});
// if you dont use var, variables are global
$(function() {
doIt = function() { alert('did it'); }
})
回答by Mark Schultheiss
$(document).ready(function()
{
});
is an event handler for document.ready, the functions inside that handler are within that scope.
是 document.ready 的事件处理程序，该处理程序内的函数在该范围内。
A better method is to insert a handler for your click event inside, then call that function there.
更好的方法是在里面为你的点击事件插入一个处理程序，然后在那里调用那个函数。
$(document).ready(function()
{
alert('ready');
$('body input').click(function(){
doIt();
});
function doIt() {
alert('did it');
};
});
This ALSO has the side effect of removing code from your markup (a good thing) in that you can remove that onclick from your input tag.
这也具有从标记中删除代码的副作用（一件好事），因为您可以从输入标记中删除该 onclick。
回答by Muleskinner
Yes, as mentioned by others you really need to move the function outside of the jquery ready declaration. Also please note that javascript is case sensitive, hence you should use onClick rather than onclick. Regards
是的，正如其他人所提到的，您确实需要将函数移到 jquery 就绪声明之外。另请注意，javascript 区分大小写，因此您应该使用 onClick 而不是 onclick。问候
回答by Rijvi Rajib
What you are doing right now is simply putting a function doIt() inside a (for all intents and purposes) window.onload event. This function will never get called outside of the document.ready unless you bind it to an element because it's stuck inside the scope of document.ready.
您现在所做的只是将函数 doIt() 放在（出于所有意图和目的） window.onload 事件中。这个函数永远不会在 document.ready 之外被调用，除非你将它绑定到一个元素，因为它被困在 document.ready 的范围内。
You need to move your function outside of the document.ready so it can be called by outside events.
您需要将您的函数移到 document.ready 之外，以便它可以被外部事件调用。
Just a little link for reference: http://www.webdevelopersnotes.com/tutorials/javascript/global_local_variables_scope_javascript.php3
只是一个小链接供参考：http: //www.webdevelopersnotes.com/tutorials/javascript/global_local_variables_scope_javascript.php3
回答by Amit Soni
Try this...
尝试这个...
$(document).ready(function() {
alert('ready');
$("#Go").submit(function(event) {
alert('did it');
});
});
<input name="Go" id="Go" type="button" value="Go" />
