为什么我不能使用onClick在jQuery $(document)中执行一个函数呢?准备好函数?

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.

第一个警报出现了，但是在我点击按钮之后，我再也没有看到第二个警报(“did it”)。看起来javascript不认为doIt()函数是在单击按钮时定义的。

Here's the relevant code:

8 个解决方案

#1

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=""查找的地方。您需要将它移出文档。准备(所以它不局限于这个闭包)，或者(一个更好的方法，IMO)在文档中绑定它。准备好了，我的意思是:

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

You define doIt in your document.ready as a function statement.

在文档中定义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

What you need to do is bind a "click" event to it using jquery like this.

您需要做的是使用jquery这样的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/

#4

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'); }
})

#5

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

is an event handler for document.ready, the functions inside that handler are within that scope.

是文档的事件处理程序。准备好了，处理程序内部的函数在该范围内。

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。

#6

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()函数放在一个(实际上也是目的)窗口中。onload事件。这个函数在文档之外永远不会被调用。准备好，除非你把它绑定到一个元素上，因为它被卡在文件的范围内。

You need to move your function outside of the document.ready so it can be called by outside events.

您需要将函数移出文档。准备好了，可以通过外部事件来调用它。

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

Try this...

试试这个…

$(document).ready(function() {


    alert('ready');


        $("#Go").submit(function(event) {
           alert('did it');
        });

 });

<input name="Go" id="Go" type="button" value="Go" />

#8

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 ready声明之外。另外请注意，javascript是区分大小写的，因此应该使用onClick而不是onClick。问候

#1