为什么我不能使用onClick来执行jQuery $(document).ready函数中的函数？

mu0hgdu0 于 2022-12-22 发布在 jQuery

关注(0)|答案(8)|浏览(180)

我刚接触JavaScript和jQuery，我想单击一个按钮，然后执行一个js函数（对于本例，它只是一个警报，但实际上是一个 AJAX 函数）。
出现了第一个警告，但在我单击按钮后，我再也没有看到第二个（“did it”）警告，看起来JavaScript认为在单击按钮时没有定义doIt()函数。
下面是相关代码：

$(document).ready(function()
{ 
    alert('ready');

    function doIt() {
        alert('did it');
    };
}
)

<body>
    <input name="Go" type="button" value="Go" onclick="doIt();"/>
</body>

jquery

来源：https://stackoverflow.com/questions/3371632/why-cant-i-use-onclick-to-execute-a-function-inside-a-jquery-document-ready

8条答案

按热度按时间

9jyewag01#

这是因为该函数不在全局上下文中，而全局上下文正是onclick=""要查找它的地方。您需要将它移出document.ready（这样它的作用域就不会仅限于该闭包），或者（一个更好的方法IMO）将它绑定到document.ready中，下面是我所说的每一个：
将其绑定在内部（为此请删除您的onclick=""）：

$(document).ready(function() { 
  alert('ready');
  $("input[name='Go']").click(doIt);
  function doIt() {
    alert('did it');
  }
});

或者匿名版本（再次删除您的onclick=""）：

$(document).ready(function() { 
  alert('ready');
  $("input[name='Go']").click(function() {
    alert('did it');
  });
});

或者将其移到外面（保留您的onclick=""）：

$(document).ready(function() { 
  alert('ready');
});
function doIt() {
  alert('did it');
}

赞(0）回复(0）举报 2022-12-22

fumotvh32#

你可以在文档中把doIt定义为一个函数语句。
你应该使用一个函数表达式或者从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，onClick并不是jQuery真正的执行方式，可能应该用ready函数中定义的click处理程序来替换，但是它工作并且是允许的。

赞(0）回复(0）举报 2022-12-22

e37o9pze3#

您需要做的是使用jquery将一个“click”事件绑定到它，如下所示。

jQuery(document).ready(function($) {

    $('#my_button').click(function() {

        alert('i was clicked');

    });
});  

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

下面是一个jsfiddle的现场演示：http://jsfiddle.net/8A5PR/
下面是您的手册页：http://api.jquery.com/click/

赞(0）回复(0）举报 2022-12-22

uemypmqf4#

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

赞(0）回复(0）举报 2022-12-22

zmeyuzjn5#

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

是document.ready的事件处理程序，则该处理程序内的函数都在该范围内。
一个更好的方法是在里面插入click事件的处理程序，然后在那里调用该函数。

$(document).ready(function() 
{  
    alert('ready'); 

  $('body input').click(function(){
    doIt();
  });
   function doIt() { 
        alert('did it'); 
    }; 
});

这也有从标记中删除代码的副作用（一件好事），因为您可以从输入标记中删除onclick。

赞(0）回复(0）举报 2022-12-22

xwbd5t1u6#

你现在所做的只是把一个函数doIt（）放到一个window.onload事件中（无论出于何种目的），这个函数永远不会在document.ready之外被调用，除非你把它绑定到一个元素上，因为它被卡在document.ready的作用域中了。
您需要将函数移到document.ready之外，以便外部事件可以调用它。
只是一个小链接供参考：http://www.webdevelopersnotes.com/tutorials/javascript/global_local_variables_scope_javascript.php3

赞(0）回复(0）举报 2022-12-22

0vvn1miw7#

试试这个...

$(document).ready(function() {

    alert('ready');

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

 });

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

赞(0）回复(0）举报 2022-12-22

uelo1irk8#

是的，正如其他人提到的，你确实需要把函数移到jquery ready声明之外。另外，请注意javascript是区分大小写的，因此你应该使用onClick而不是onclick。

赞(0）回复(0）举报 2022-12-22