Почему onclick = function () не работает внутри готового документа?

Question

Глядя на Когда мне следует использовать функцию document.ready в jQuery? и Кнопка отправки формы onclick не вызывает мою JS функцию дает ощущение, что использование $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)). Но почему этот метод терпит неудачу?

Answer 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");
  }
})

Answer 2

$ (document) .ready () вызывается после завершения загрузки всех ваших html. Поскольку вы вызываете функцию "f ()" в вашем html, она вызывает "f ()" до того, как что-либо в "$ (document) .ready ()" еще не запустилось, что означает, что для "f (нет определения"). )».

В настоящее время принято даже не использовать "$ (document) .ready ()", пока вы загружаете этот jQuery в конце всех ваших html, чтобы избежать длительного времени загрузки. Это позволит вам вызывать "f ()" изнутри вашего html и по-прежнему иметь остаток вашей jQuery загрузки после html.

Answer 3

Каждый раз, когда вы объявляете функцию, вы создаете область действия. Все, что объявлено внутри , что область недоступна за пределами этой области.

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