为什么 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(){

    var a = 'hello';

    function b () {

        console.log(a);

    }

})();

a;   // syntax error - a is undefined

b(); // syntax error - b is undefined

您可以通过将函数分配给全局变量来使其工作：

var f;

$(document).ready(function(){

  f = function(){

    alert("alert");

  }

})

Answer 2

每当你声明一个函数时，你就会创建一个作用域。在该范围内声明的任何内容都无法在该范围之外访问。

$(document).ready(function(){

  // f is only accessible to other code declared in this function.

  function f(){

    alert("alert");

  }

})

使用 jQuery 执行此操作的推荐方法是在 jQuery 就绪函数中分配单击处理函数。

HTML：

<button id="my-button-id">My Button</button>    

JavaScript：

$(document).ready(function(){

  // f is only accessible to other code declared in this function.

  function f(){

    alert("alert");

  }

  // Assign onclick here

  $('#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 的其余部分。