为什么我不能使用onClick在jQuery $（document）.ready函数中执行函数？
[英]Why can't I use onClick to execute a function inside a jQuery $(document).ready function?
问题描述
I'm new to Javascript and jQuery. 
我是Java和jQuery的新手。 I want to click a button and have a js function executed. 我想单击一个按钮并执行js函数。 (For this example, it's just an alert, but it's actually an ajax function.) （在此示例中，它只是一个警报，但实际上是一个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>
8 个解决方案
解决方案1
33 已采纳 2010-07-30 13:03:44
It's because that function isn't in a global context, which is where your onclick="" is looking for it. 这是因为该函数不在全局上下文中，这是您的onclick=""寻找它的地方。 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: 您需要将其移动到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');
}
解决方案2
15 2010-07-30 13:04:17
You define doIt in your document.ready as a function statement. 您可以在document.ready中将doIt定义为函数语句。
Either you should use a function expression or declare the function out of the ready function . 您应该使用函数表达式或在ready函数之外声明函数 。
$(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函数中定义的点击处理程序代替，但可以并允许使用 。
解决方案3
4 2010-07-30 13:03:42
What you need to do is bind a "click" event to it using jquery like this. 您需要做的是使用jquery将“ click”事件绑定到它。
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/
解决方案4
3 2010-07-30 13:07:15
Javascript has two kinds of scope, global, and function level. Javascript具有两种范围，全局和功能级别。 If you declare doIt inside a function, it will not be visible outside the function. 如果在函数内部声明doIt，则在函数外部将不可见。 There are a few ways to fix it 有几种方法可以修复它
//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'); }
})
解决方案5
1 2010-07-30 13:07:35
$(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. 更好的方法是在内部为click事件插入一个处理程序，然后在其中调用该函数。
$(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。
解决方案6
0 2010-07-30 13:06:15
What you are doing right now is simply putting a function doIt() inside a (for all intents and purposes) window.onload event. 您现在正在做的只是将一个函数doIt（）放在（出于所有意图和目的）window.onload事件中。 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. 除非您将其绑定到元素，否则此函数将永远不会在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
解决方案7
0 2010-07-30 13:06:21
Try this... 尝试这个...
$(document).ready(function() {
alert('ready');
$("#Go").submit(function(event) {
alert('did it');
});
});
<input name="Go" id="Go" type="button" value="Go" />
解决方案8
0 2010-07-30 13:08:15
Yes, as mentioned by others you really need to move the function outside of the jquery ready declaration. 是的，正如其他人所提到的，您确实需要将函数移到jquery ready声明之外。 Also please note that javascript is case sensitive, hence you should use onClick rather than onclick. 另外请注意，JavaScript区分大小写，因此您应该使用onClick而不是onclick。 Regards 问候
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.