Почему я не могу определить функции в jQuery document.ready()?

Функции появляются как undefined, если я помещаю их в функцию document.ready():

$(document).ready(function(){
  function foo()
  {
    alert('Bar');
  }
});

foo(); // Undefined

Почему это происходит? Я уверен, что мне просто нужно некоторое понимание:)

Ответ 1

Не знаю, почему важно определить функцию в области ready(), но вы можете заставить ее работать, объявив foo спереди:

<html><head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.1/jquery.min.js"></script>
<script>
var foo;                           // Here the difference
$(document).ready(function(){
  foo = function ()
  {
    alert('Bar');
  }
});
</script></head><body>
<input type="button" onclick="foo()" value="Click me">
</body></html>

Очевидно, вы не можете вызвать foo() из встроенного script сразу после ready(), потому что код ready() еще не запущен, но вы можете позже вызвать функцию.

Просто убедитесь, что ничто не может попытаться вызвать foo() до запуска кода ready() (или сделать начальное объявление foo() безобидной функцией).

Ответ 2

Вы можете, но они должны быть вызваны в рамках метода ready(), иначе они теряют область действия, когда метод ready() завершается.

Например, код ниже будет работать:

$(document).ready(function(){
  function foo()
  {
    alert('Bar');
  }

  foo(); // still in the scope of the ready method
});

Ответ 3

Они появятся как undefined, если вы поместите их в любую область, которая не принадлежит им. Если вы действительно хотите использовать их за пределами $(document).ready(...), вам нужно объявить их извне. Например:

var foo;

$(document).ready(function(){
  foo = function()
  {
    alert('Bar');
  }
});

foo(); // works now because it is in scope

Надеюсь, что это поможет.

Ответ 4

Ваша функция определена в области обратного вызова $(document).ready() и не может быть видна извне. Либо определите функцию вне области $(document).ready(), чтобы вызвать ее только изнутри.

Ответ 5

<script>
    $(document).ready(function(){
      myfnc = function (param1, param2)
      {
        alert('Hello');
      }
      myfnc();
    });
</script>
<input type="button" onclick="myfnc('arg1', 'arg2')" value="Click me">

Ответ 6

Еще одно дополнение:

При объявлении функций или переменных внутри функции $(document).ready() они недоступны при использовании привязок onclick() в документе.

Вы можете перемещать объявления за пределами $(document).ready(), или вы можете использовать $('#element').on('click', function() {}) внутри `$ (document).ready().