jQuery 代码没有运行 $(function(){...});但没有它会运行答案

【问题标题】：jQuery code is not running with $(function(){...}); but will run without itjQuery 代码没有运行 $(function(){...});但没有它会运行
【发布时间】：2019-02-03 18:52:29
【问题描述】：

我对 jQuery 很陌生，但从我读过的内容来看，这对我来说没有意义。这是我的代码：

$(function() {
    function grid() {
        $("#main").hide();
    }
});

<html>

  <head>
    <script src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous"></script>
    <script src="numbers.js"></script>
  </head>

  <body>
    <div id="main" style="height:90vh; width: 90vw; background-color:lightgray">
      <button onclick="grid()">grid</button>
    </div>
  </body>

</html>

当我将$(function(){...}); 放在我的代码周围时，它永远不会运行并且控制台返回ReferenceError: grid is not defined，但是如果我删除$(function(){...});，那么一切都会正常运行。

【问题讨论】：

删除它。 grid() 需要在全局窗口范围内才能被onclick 访问。如果你里面有其他 jQuery....将 grid() 移到外面
这就是为什么你不应该使用内联事件处理程序 (onclick="grid()") 而是在 grid 可见的地方使用 $('selector').on('click', grid) 以附加事件侦听器的原因之一。
What does $(function() {} ); do?: 里面的代码在DOM准备好时执行。

标签： javascript jquery referenceerror

【解决方案1】：

$(function() { }) 中的代码有自己的范围，因此当您在其中定义函数时，该函数仅存在于该范围内。但是，您有：

<button onclick="grid()">grid</button>

在全局范围内（不存在）查找名为“grid”的函数。

理想情况下，如果你使用的是 jQuery，你会做一些类似的事情：

<button id="grid">grid</button>

$(function(){
    $('#grid').on('click', function() {
        $("#main").hide();
    });
});

【讨论】：

【解决方案2】：

你可以调用一个javascript函数或者在$(document).ready中定义按钮的onClick监听器

// using jquery 
$(document).ready(function() {
    $('#grid').click(function(){
        $("#main").hide();
    });
});

// using javascript function
function grid(){
   document.getElementById('main').style.display = 'none';
}

<html>
  <head>
    <script src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous"></script>
    <script src="numbers.js"></script>
  </head>
  <body>
    <div id="main" style="height:90vh; width: 90vw; background-color:lightgray">
      <button id="grid">grid</button>
       <button onclick="grid()">grid2</button>
    </div>
  </body>
</html>

【讨论】：