功能無法點擊？ （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

這是因為Skarllot解釋了javaScript的作用域

請參考了解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關鍵字將它們明確地放在全局范圍內。