Question

我在javascript中构建了我的脚本，然后决定将其转换为jQuery以简化未来的功能。当我在脚本中添加.ready时，我的功能不再可见。根据我对.ready工作原理的理解，其内容只应在创建DOM之后触发。所以我希望看到console.log（userInput）的结果 - 为了示例目的，我已经取出了大部分代码。但是当我运行程序时，firebug显示＆＃34; ReferenceError：getInput未定义＆＃34;。

这是我的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已经导致冲突？我不需要它，但它对我来说仍然没有意义。有人可以解释这个问题是什么，或者指向一个解释它的帖子？

Answer 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事件似乎更合适。

Answer 2

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

＆＃13;

PS C:\Users\tejas\Desktop\DSA> python salary_calc.py
Enter your first name: tj
Enter your job position: it
Enter hourly wage rate: 23
Enter total regular hours you worked this week: 20
Your regular pay for this week is:  460.0
Enter total overtime hours this week: 20
The total overtime pay this week is:  690.0
So total pay due this week is:  1150.0
Your super contribution this week is: 109.25
Enter the amount of your yearly income: 20000
You have to pay AUD 342.0 in taxes this year
Enter the amount of your yearly income: 20000
You have to pay AUD 342.0 in taxes this year
Your super contribution this year is:  1900.0

＆＃13;

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

＆＃13;

Answer 3

他们处于不同的背景下。也就是说，onclick在全局上下文中查看它，而函数在.ready unnamed函数内定义。将您的点击处理程序绑定在.ready中，或在其外部定义您的函数。

Answer 4

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

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

现在您可以通过MyModule.getInput

访问它

据我所知，没有必要将此功能置于文件准备状态。

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

Answer 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/

最佳

为什么我的功能与.ready不一致？

6 个答案: