функция не работает нажимать? (jquery/javascript)

Question

Это самая неприятная ошибка, которую я, вероятно, когда-либо имел при кодировании. Я пытаюсь щелкнуть кнопку, и она появится в приветственном окне. Если я удалю документ , готовый, он работает. Если я удалю функцию и просто поставлю флажок в документе document.ready, она также работает, но явно без щелчка. Однако, JS не работает все вместе, и я понятия не имею, почему.

HTML

<button id="signup-box-button" type="button" onclick="signupSubmit()">sign up</button> 

JS

$(document).ready(function(){ 

    function signupSubmit(){ 
     alert("hello"); 
    } 

}); 

Answer 1

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

Чтобы решить эту проблему, просто переместите функцию, которая используется вне функции «готовность», чтобы ее можно было видеть снаружи.

$(document).ready(function(){ 
    // code here 
}); 

function signupSubmit(){ 
    alert("hello"); 
} 

Или, еще лучше. Оставьте код Javascript только в файле Javascript, и пусть HTML с HTML только.

HTML

<button id="signup-box-button" type="button">sign up</button> 

Javascript

$(document).ready(function(){ 
    $('#signup-box-button').click(function(){ 
     alert("hello"); 
    } 
}); 

Answer 2

Это из области видимости в JavaScript, как объяснено Skarllot

Пожалуйста refer знать, как this ключевых слов работает с инлайн события обработчики.

Вы можете использовать код, приведенный ниже фрагмент кода

$(document).ready(function(){ 

    this.signupSubmit = function(){ 
     alert("hello"); 
    } 

}); 

См JSFIDDLE

Добавляя this по ключевому слову function будет зарегистрирован в глобальном масштабе. И вышеупомянутое решение может загрязнять глобальное пространство имен.

Чтобы лучше понять выше функциональность:

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

Вот упрощенный пример:

function ready() { 
    function signupSubmit() { } 
} 

ready(); 
signupSubmit(); // ReferenceError because signupSubmit is not defined in this scope 

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