实现jQuery函数答案

【问题标题】：Implementing jQuery function实现jQuery函数
【发布时间】：2013-08-05 18:03:00
【问题描述】：

我一直在尝试实现一些 JavaScript，它会在所有字段都填满之前禁用提交按钮。我在这里找到了一个很棒的：Disabling submit button until all fields have values。 Hristo 提供了一个链接，正是我在这里需要的：http://jsfiddle.net/qKG5F/641/。

我的问题是，当我尝试整理一个完整的“最小工作示例”时，我完全被难住了。我确定我缺少一些小方面，但这是我想出的：

<html>
<head>
    <title></title>
    <style type="text/css">
    </style>
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js"></script>
    <script type="text/javascript">
    (function() {
        $('form > input').keyup(function() {

        var empty = false;
        $('form > input').each(function() {
            if ($(this).val() == '') {
            empty = true;
            }
        });

        if (empty) {
            $('#register').attr('disabled', 'disabled'); // updated according to https://stackoverflow.com/questions/7637790/how-to-remove-disabled-attribute-with-jquery-ie
        } else {
            $('#register').removeAttr('disabled'); // updated according to https://stackoverflow.com/questions/7637790/how-to-remove-disabled-attribute-with-jquery-ie
        }
        });
    })()
    </script>
</head>
<body>
    <form>
    Username<br />
    <input type="text" id="user_input" name="username" /><br />
    Password<br />
    <input type="text" id="pass_input" name="password" /><br />
    Confirm Password<br />
    <input type="text" id="v_pass_input" name="v_password" /><br />
    Email<br />
    <input type="text" id="email" name="email" /><br />     
    <input type="submit" id="register" value="Register" disabled="disabled" />
    </form>
    <div id="test">
    </div>
</body>

我只是复制/粘贴并添加了我认为使页面正常工作所必需的内容，但我的提交按钮仍然永久禁用。为了完成这项工作，我缺少什么简单的部分？

谢谢！

【问题讨论】：

有控制台输出吗？你能把一个 jsFiddle 放在一起显示你的错误吗？
jsFiddle 上似乎不存在我的问题。我在我的问题中包含的链接对我来说很好，但是当我尝试创建自己的页面以在 WAMP 上进行测试时，提交链接仍然被禁用。页面上没有显示特定错误。这回答了你的问题吗？
Code working in jsFiddle but not in browser的可能重复
试试<script type='text/javascript' src='http://code.jquery.com/jquery-1.5.js'></script>虽然应该没什么区别
您需要在document ready event 中运行代码。默认情况下，jsfiddle 会这样做。此外，除非您有充分的理由使用 jQuery 1.5.2，否则请更新到较新的版本。 1.5 2岁以上。

标签： javascript jquery

【解决方案1】：

你必须用 onload 函数包围它：

$(window).load(function(){
(function() {
    $('form > input').keyup(function() {

        var empty = false;
        $('form > input').each(function() {
            if ($(this).val() == '') {
                empty = true;
            }
        });

        if (empty) {
            $('#register').attr('disabled', 'disabled');
        } else {
            $('#register').removeAttr('disabled');
        }
    });
})()
});

如果您查看 jsFiddle 的源代码，您会看到它被 same way. 包装了

【讨论】：

这正是我所做的！在我最初错过的类似问题中提供了相同的答案：stackoverflow.com/questions/4637873/…Thanks！

【解决方案2】：

我在我的系统上对此进行了测试，可以使用您自己的 jquery 版本，以及稍加改动的代码并将 javascript 包装在 document.ready() 中。

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <style type="text/css">
    </style>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js"></script>
    <script type="text/javascript">
       $(document).ready(function(){
        $('form > input').keyup(function() {

        var empty = false;
        $('form > input').each(function() {
            if ($(this).val() == '') {
            empty = true;
            }
        });

        if (empty) {
            $('#register').attr('disabled', 'disabled'); // updated according to http://stackoverflow.com/questions/7637790/how-to-remove-disabled-attribute-with-jquery-ie
        } else {
            $('#register').removeAttr('disabled'); // updated according to http://stackoverflow.com/questions/7637790/how-to-remove-disabled-attribute-with-jquery-ie
        }
        });
    });
    </script>
</head>
<body>
    <form>
    Username<br />
    <input type="text" id="user_input" name="username" /><br />
    Password<br />
    <input type="text" id="pass_input" name="password" /><br />
    Confirm Password<br />
    <input type="text" id="v_pass_input" name="v_password" /><br />
    Email<br />
    <input type="text" id="email" name="email" /><br />     
    <input type="submit" id="register" value="Register" disabled="disabled" />
    </form>
    <div id="test">
    </div>
</body>

</html>

【讨论】：

我确定这个问题已经解决了，请accept an answer。

【解决方案3】：

你原来的 js 是一个立即调用的函数表达式。这是解释该模式的链接： http://benalman.com/news/2010/11/immediately-invoked-function-expression/

您定义了一个匿名函数，然后立即调用它。当您的 html 页面加载时，脚本已经运行。正如其他人正确回答的那样，您需要等待所有 DOM 元素加载之前执行脚本。

虽然

$(window).load(function(){};

有效，你应该使用这个的 jQuery 版本：

$(document).ready(function(){ };

一方面，它是 jQuery 习惯用法，另一方面， $(window).load 稍后触发，其中 $(document).ready() 在所有 DOM 元素可用时触发；不是在加载所有资产（可能很大）后立即。

来源：window.onload vs $(document).ready()

【讨论】：

【解决方案4】：

如果您将 JavaScript（整个 script 元素）放在页面末尾，就在关闭 body 标记之前，它应该可以工作。这是因为 JavaScript 需要在 DOM 构建后运行。通过在页面加载后放置脚本（然后立即调用它），文档将准备就绪并且应该可以工作。

工作示例：http://jsfiddle.net/NgEHg/

【讨论】：