为什么 onclick = function() 在文档就绪中不起作用？

Question

查看何时应该使用 jQuery 的 document.ready 函数？表单提交按钮 onclick 不会调用我的 JS 函数，给人一种在代码中使用应该没有坏处的感觉$document.ready(function(){})，而是有好处的。

但是，当我在按钮的方法中输入函数时onclick，语句内的函数ready()不会被执行。为什么这样？

例如，此代码不会发出警报

$(document).ready(function(){

  function f(){

  alert("alert");

  }

})

/*function f(){

  alert("alert");

  } */

<button onclick="f()">

My Button

</button>

我知道如果我使用 jQuery 选择器来使其工作，它就会 ( $("button").click(f))。但为什么这个方法会失败呢？

Answer 1

这是一个范围问题 - 在函数内部声明的函数在外部函数之外无法访问，就像在函数内部声明的变量一样：(function(){&nbsp; &nbsp; var a = 'hello';&nbsp; &nbsp; function b () {&nbsp; &nbsp; &nbsp; &nbsp; console.log(a);&nbsp; &nbsp; }})();a;&nbsp; &nbsp;// syntax error - a is undefinedb(); // syntax error - b is undefined您可以通过将函数分配给全局变量来使其工作：var f;$(document).ready(function(){&nbsp; f = function(){&nbsp; &nbsp; alert("alert");&nbsp; }})

Answer 2

每当你声明一个函数时，你就会创建一个作用域。在该范围内声明的任何内容都无法在该范围之外访问。$(document).ready(function(){&nbsp; // f is only accessible to other code declared in this function.&nbsp; function f(){&nbsp; &nbsp; alert("alert");&nbsp; }})使用 jQuery 执行此操作的推荐方法是在 jQuery 就绪函数中分配单击处理函数。HTML：<button id="my-button-id">My Button</button>&nbsp; &nbsp;&nbsp;JavaScript：$(document).ready(function(){&nbsp; // f is only accessible to other code declared in this function.&nbsp; function f(){&nbsp; &nbsp; alert("alert");&nbsp; }&nbsp; // Assign onclick here&nbsp; $('#my-button-id').on('click', f)})

Answer 3

$(document).ready() 在所有 html 加载完成后被调用。由于您在 html 中调用“f()”函数，因此它会在“$(document).ready()”中的任何内容运行之前调用“f()”，这意味着“f()”没有定义。现在通常甚至不使用“$(document).ready()”，只要您在所有 html 末尾加载该 jQuery 即可避免长时间加载。这将允许您从 html 中调用“f()”，并且在 html 之后仍然加载 jQuery 的其余部分。