为啥我不能使用 onClick 在 jQuery $(document).ready 函数中执行函数？

Posted 2023-02-19

技术标签:

【中文标题】为啥我不能使用 onClick 在 jQuery $(document).ready 函数中执行函数？【英文标题】：Why can't I use onClick to execute a function inside a jQuery $(document).ready function?为什么我不能使用 onClick 在 jQuery $(document).ready 函数中执行函数？ 【发布时间】：2011-03-23 05:55:31 【问题描述】：

我是 javascript 和 jQuery 的新手。我想单击一个按钮并执行一个 js 函数。（对于这个例子，它只是一个警报，但它实际上是一个 ajax 函数。）

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

以下是相关代码：

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

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

)

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

【问题讨论】：

【参考方案1】：

这是因为该函数不在全局上下文中，这是您的 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');

【讨论】：

或将其保留在内部，但将其声明为全局函数（保留您的 onclick）我实际上做了这两个，视情况而定。例如，我有时使用包含 Javascript 的 .ascx 文件，当我这样做时，将函数放置在内部会限制函数的范围，但有时我想要一个从多个包含调用的全局函数 - 在这种情况下，我将功能移到范围之外。所以，这两个选项都有用处。前两个代码，并非在所有情况下都有效，尤其是当我们必须传递参数来区分不同的元素时。 .click 已被弃用。【参考方案2】：

您在 document.ready 中将 doIt 定义为函数语句。

您应该使用函数表达式 或从就绪函数中声明函数。

$(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>

（是的，onClick 并不是真正的 jQuery 实现方式，可能应该由在 ready 函数中定义的点击处理程序替换，但它有效并且被允许。

【讨论】：

你确定这行得通吗？ doIt 仍然在本地范围内声明。如果我输入var doIt，你就对了。省略 var 声明一个全局变量。 +1 然后教我一些新东西。这是 jQuery 的特性还是适用于一般的 JavaScript？ @fearofawhackplanet :通用 JavaScript @fearofawhackplanet 看到这个以更深入地处理这个主题：articles.sitepoint.com/article/oriented-programming-1/3【参考方案3】：

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

【讨论】：

@Konerak 我认为您没有抓住重点，这使您可以从标签中提取 onclick 事件管理，并将其与该函数一起放入 javascript 中，从而将您的代码（行为）与您的标记，而执行功能保持不变 - 处理页面上元素的点击事件。 @Mark - 我认为@Konerak 根本没有错过重点。这个答案表明您“需要使用 jquery 将点击事件绑定到我们”。这是不正确的。使用 jQuery 绑定事件是一种选择，但您不需要这样做。【参考方案4】：

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() 
 
);

是 document.ready 的事件处理程序，该处理程序内的函数在该范围内。

更好的方法是在里面为你的点击事件插入一个处理程序，然后在那里调用那个函数。

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

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

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

【讨论】：

【参考方案6】：

您现在所做的只是将函数 doIt() 放入（出于所有意图和目的）window.onload 事件。这个函数永远不会在 document.ready 之外被调用，除非你将它绑定到一个元素，因为它被困在 document.ready 的范围内。

您需要将您的函数移到 document.ready 之外，以便外部事件可以调用它。

只是一个参考链接：http://www.webdevelopersnotes.com/tutorials/javascript/global_local_variables_scope_javascript.php3

【讨论】：

来自文档：“使用 $(document).ready()，您可以在窗口加载之前加载或触发您的事件或您希望它们执行的任何操作。” docs.jquery.com/Tutorials:Introducing_$(document).ready() 哦，那我搞错了，我猜是在window.onload之前。仅仅理解并不是一个错误 :) 另一种表述方式是“当 DOM 准备好时”，因此该页面可能不会 100% 呈现，但 DOM（文档对象模型）已准备好.【参考方案7】：

试试这个...

$(document).ready(function() 


    alert('ready');


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

 );

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

【讨论】：

我可能迟到了，因为答案已经发布了。别担心 :)【参考方案8】：

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

【讨论】：

其实不是javascript。它是一个 html 属性。 onclick 可以正常工作，oNcLiCk 也可以。

以上是关于为啥我不能使用 onClick 在 jQuery $(document).ready 函数中执行函数？的主要内容，如果未能解决你的问题，请参考以下文章

为啥我不能从 onclick 属性调用名为 clear 的函数？

为啥我的 SoundPool 声音没有在 onClick() 中同时播放？

为啥我不能使用 iframe 对象和 jQuery 遍历这个元素？

为啥div里的onclick()事件不起作用？不会jq

为啥我不能使用 jquery 访问 ajax 拉取的内容 [重复]

为啥div里的onclick()事件不起作用？不会jq