为什么 onclick = function() 在文档准备好的内部不起作用？答案

【问题标题】：Why does onclick = function() does not work inside document ready?为什么 onclick = function() 在文档准备好的内部不起作用？
【发布时间】：2020-04-09 19:37:15
【问题描述】：

查看When should I use jQuery's document.ready function? 和Form submit button onclick does not call my JS function 会让人感觉使用$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))。但是为什么这个方法会失败呢？

【问题讨论】：

全局范围内的onclick需要方法
不要在.ready内定义函数
因为您是在文档加载时调用的外部函数中定义它。
正如其他人所说，问题在于范围。然而，需要注意的是，内联 onX 属性不再被认为是好的做法，应该避免使用它们。始终以不显眼的方式附加您的事件处理程序。

标签： javascript jquery html

【解决方案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");
  }
})

【讨论】：

【解决方案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)
})

【讨论】：

【解决方案3】：

$(document).ready() 在所有 html 完成加载后被调用。由于您在 html 中调用“f()”函数，它会在“$(document).ready()”中的任何内容运行之前调用“f()”，这意味着“f()”没有定义.

现在通常甚至不使用“$(document).ready()”，只要您在所有 html 的末尾加载该 jQuery 以避免较长的加载时间。这将允许您从 html 中调用“f()”，并且在 html 之后仍然可以加载 jQuery 的其余部分。

【讨论】：