Код jQuery не работает с $ (function () {...});но без этого побежит - PullRequest
Новая
       8

Код jQuery не работает с $ (function () {...});но без этого побежит

0 голосов
/ 03 февраля 2019

Я очень новичок в 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(){...});, то все работает нормально.

Ответы [ 2 ]

0 голосов
/ 04 февраля 2019

Вы можете вызвать функцию JavaScript или определить onClick слушатель кнопки внутри $(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>
0 голосов
/ 03 февраля 2019

Код в $(function() { }) имеет свою собственную область, поэтому, когда вы определяете функцию в ней, эта функция существует только в этой области.Тем не менее, у вас есть: 

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

, который ищет функцию с именем "grid" в глобальной области видимости (где она не существует).

В идеале, если вы используете jQuery,Вы бы сделали что-то вроде: 

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

$(function(){
    $('#grid').on('click', function() {
        $("#main").hide();
    });
});
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Похожие темы

...