为什么我的函数不能很好地与 .ready 一起使用？答案

【问题标题】：Why is my function not playing nice with .ready?为什么我的函数不能很好地与 .ready 一起使用？
【发布时间】：2016-08-07 15:33:08
【问题描述】：

我用 javascript 构建了我的脚本，然后决定将其转换为 jQuery 以简化未来的功能。当我在脚本周围添加 .ready 时，我的函数不再可见。根据我对 .ready 如何工作的理解，它的内容应该只在创建 DOM 后触发。所以我希望看到console.log(userInput) 的结果——出于示例目的，我已经取出了大部分代码。但是当我运行程序时，firebug 显示“ReferenceError: getInput is not defined”。

这是我的html：

<!doctype html>
<html>
<head>
    <meta charset="UTF-8">
    <script src="https://code.jquery.com/jquery-2.2.4.min.js" integrity="sha256-BbhdlvQf/xTY9gja0Dq3HiwQF8LaCRTXxZKRutelT44=" crossorigin="anonymous"></script>
    <script src="script/script.js"></script>
</head>
<body>
    <form>
        Input: <input type="text" name="userInput" id="userInput" autofocus><br>
        <input type="button" value="Submit" name="Submit" onclick="getInput()">
    </form>
</body>
</html>

这是我的脚本：

    $(document).ready(function() {
        function getInput() {
            var userInput = $('#userInput').val(); 
            console.log(userInput);
        }
    });

如果我删除 .ready 函数，一切都会按预期工作，但我不确定为什么会发生冲突。我读了这篇文章 (What exactly does $(document).ready guarantee?)，其中提到了添加一个 onload 函数，我尝试过，但仍然遇到同样的错误。

为什么 .ready 会导致冲突？我不需要它，但它对我来说仍然没有意义。有人可以解释问题是什么或指向我解释它的帖子吗？

【问题讨论】：

从哪里调用getInput？

标签： javascript jquery

【解决方案1】：

您犯了在 jQuery 中使用内联事件处理程序的错误。

内联事件处理程序要求函数在全局范围内可用(window.functionName)，而 document.ready 有自己的非全局范围，因此在 document.ready 内定义的函数内联事件处理程序不可用。

你应该做的是使用更多的 jQuery

<form id="myForm">
    Input: <input type="text" name="userInput" id="userInput" autofocus>
    <br />
    <input type="submit" value="Submit">
</form>

-

$(document).ready(function() {
    $('#myForm').on('submit', function(e) {
        e.preventDefault();

        var userInput = $('#userInput').val(); 
        console.log(userInput);
    });
});

使用实际的提交按钮，表单submit 事件似乎更合适。

【讨论】：

这是一件罕见而美好的事情，有时，答案是真的：“需要更多 jQuery！”

【解决方案2】：

你可以实现你想要的，改变你的 html 和 js 代码。

$(document).ready(function() {
    // attach an even handler for the click event
    // on the elements that have the class js-submit
    $('.js-submit').click(function(){

        // get the value of the input.
        var userInput = $("#userInput").val();

        console.log(userInput);
    });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form>
        Input: <input type="text" name="userInput" id="userInput" autofocus><br>
        <input type="button" value="Submit" name="Submit" class="js-submit">
    </form>

【讨论】：

【解决方案3】：

它们处于不同的上下文中。也就是说，onclick 在全局上下文中查看它，而函数是在 .ready 未命名函数中定义的。要么在 .ready 中绑定你的点击处理程序，要么在它之外定义你的函数。

【讨论】：

【解决方案4】：

函数范围受限于文档就绪函数回调。所以你需要通过全局可访问的变量来引用它：

MyModule = {}; 
$(document).ready(function() {
    MyModule.getInput = function() {
        var userInput = $('#userInput').val(); 
        console.log(userInput);
    }
});

现在您可以通过MyModule.getInput访问它

据我所知，没有必要将此功能放在文档就绪下。

【讨论】：

【解决方案5】：

您在 document.ready 闭包中定义函数，该闭包具有自己的范围，因此在使用 onclick 属性执行函数时将不起作用。因为它不在全局范围内。相反，只需将您的函数与窗口绑定，以便 onclick 可以找到它。用这个

$(document).ready(function() {
    window.getInput = function() {
        var userInput = $('#userInput').val(); 
        console.log(userInput);
    }
});

或者你可以使用推荐的 jquery 来获得同样的东西

Input: <input type="text" name="userInput" id="userInput" autofocus><br>

<input type="button" value="Submit" name="Submit" id="submit-button">

$(document).ready(function() {
    $("#submit-button").click(function() {
        var userInput = $("#userInput").val();
        console.log(userInput);
    });
});

【讨论】：

【解决方案6】：

我为你创建了一个 JsFiddle。我对其进行了一些修改，而不是将 onclick 事件添加到您的按钮，而是在 javascript 中添加了侦听器。

问题在于您在 HTML 中绑定了侦听器，但在 jquery 中查找它。您可以在您所说的为您工作的 .ready() 之外创建函数，也可以在 jQuery 中绑定事件，如下所示。

<body>
<form>
    Input: <input type="text" name="userInput" id="userInput" autofocus><br>
    <input type="button" value="Submit" name="Submit" id="submit">
</form>

$(document).ready(function() {
    $('#submit').on('click', function(){
        alert($('#userInput').val());
    });
});

小提琴：https://jsfiddle.net/uj981130/

最好的

【讨论】：