功能在点击时不起作用？ (jquery/javascript)答案

【问题标题】：function not working on click? (jquery/javascript)功能在点击时不起作用？ (jquery/javascript)
【发布时间】：2015-08-20 02:56:12
【问题描述】：

这可能是我在编码时遇到的最令人沮丧的错误。我正在尝试单击一个按钮并让它在警报框中弹出“你好”。如果我删除 document ready 它就可以了。如果我删除该功能并且只在 document.ready 中有警告框，它也可以工作，但显然无需单击。但是，那个 JS 不能一起工作，我不知道为什么。

HTML

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

$(document).ready(function(){

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

});

【问题讨论】：

也许你想把它放在你的 document.ready 块中？：$('#signup-box-button').on('click', signupSubmit);
如果你把函数放在一个文档就绪处理程序中，当它被绑定到 HTML 时它就不会存在
你真的应该停止使用内联事件处理程序 - 特别是考虑到你有 jQuery's fleet of event handling options 供你使用。
我现在觉得自己真的很蠢……好几个月没写代码了，也不知道为什么下定决心要把它放到文档里面。准备好了

【解决方案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");
    }
});

【讨论】：

【解决方案2】：

这是因为 Skarllot 解释的 javaScript 中的作用域

请refer 了解this 关键字如何与内联事件处理程序一起使用。

你可以使用下面的代码sn-p

$(document).ready(function(){

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

});

通过添加this 关键字，function 将在全局范围内注册。而上述解决方案可能会污染全局命名空间。

为了更好地理解上述功能：

内联事件处理程序在全局范围内进行评估。在您的第一个示例中，signupSubmit 未在全局范围内定义，它在您传递给 $(document).ready 的函数内定义。因此内联事件处理程序无法找到该函数。

这是一个简化的例子：

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

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

注意没有理由将函数定义放在 $(document).ready 回调中，除非使用我的第一个示例中提到的 this 关键字明确不将它们放在全局范围内。

【讨论】：