jQuery code is not running with $(function(){...}); but will run without it

Question

I'm very new to jQuery, but from what I've read, this doesn't make sense to me. Here is my code:

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

When I put$(function(){...}); around my code, it never runs and the console returns ReferenceError: grid is not defined, but if I remove $(function(){...}); then everything runs fine.

Just remove it. `grid()` needs to be in global window scope in order to be accessed by `onclick`. If you have other jQuery inside it....move grid() outside — charlietfl, Feb 03 '19 at 18:55
That's one of the reasons why you should not use inline event handlers (`onclick="grid()"`) but use `$('selector').on('click', grid)` at the place where `grid` is visible to attach the event listener. — t.niese, Feb 03 '19 at 18:56
[What does $(function() {} ); do?](https://stackoverflow.com/questions/7642442/what-does-function-do): The code inside of it is executed when the DOM is ready. — t.niese, Feb 03 '19 at 18:59

score 3 · Answer 1 · answered Feb 03 '19 at 18:56

The code within $(function() { }) has its own scope, so when you define a function within that, that function only exists within that scope. However, you have:

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

Which looks for a function called "grid" in the global scope (where it doesn't exist).

Ideally, if you are using jQuery, you would do something more like:

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

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

score 0 · Answer 2 · answered Feb 04 '19 at 06:55

you can call a javascript function or define onClick listener of button inside $(document).ready

// 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>

jQuery code is not running with $(function(){...}); but will run without it

2 Answers2