Question

我有一个看起来像这样的表格

        <form id="form-send">
            <table class="form-table">
                <tbody>
                    <tr>
                        <td width="30%">First Name <span class="required">*</span></td>
                        <td width="70%">
                            <input type="text" id="first-name" value="" />
                            <div id="first-name-error-msg" class="error-box"></div>
                        </td>
                    </tr>
                    <tr>
                        <td>Last Name<span class="required">*</span></td>
                        <td>
                            <input type="text" id="last-name" value="" />
                            <div id="last-name-error-msg" class="error-box"></div>
                        </td>
                    </tr>
                    <tr>
                        <td>Address</td>
                        <td><input type="text" value="" /></td>
                    </tr>
                    <tr>
                        <td><button type="submit">Send</button></td>
                        <td><button type="reset">Reset</button></td>
                    </tr>
                </tbody>
            </table>
        </form>

我用来验证表单输入的脚本如下所示

        $(document).ready(function($) {
            $('#form-send').submit(function (){
                var error = 0;
                var name = $('#first-name').val();
                if (name == '') {
                    error = 1;
                    $('#first-name').addClass('error');
                    $('#first-name-error-msg').html(" - First name is required");
                    $('#first-name-error-msg').parent().show();
                }
                var name = $('#last-name').val();
                if (name == '') {
                    error = 1;
                    $('#last-name').addClass('error');
                    $('#last-name-error-msg').html(" - Last name is required");
                    $('#last-name-error-msg').parent().show();
                }
    if (error) {
        return false;
    } else {
        return alert("Email sent");
    }
            });
        });

如果我按下提交按钮而不填写字段，则会显示错误消息。我要做的是：在用户再次输入到输入字段后显示错误消息后，错误消息（包含消息的div）应该消失。我尝试过这样的事情

$('.error').keyup(function() {
    $('.error-box').hide('slow');
});

但它不起作用，有人可以给我一些关于我做错了什么或者我应该使用其他方法的提示吗？

Answer 1

对dynamically attached classes

使用 on()

$(document).on('keyup','.error',function() {
    $(this).next('.error-box').hide('slow');
});

<强> Working Demo

您可以使用类来简化 {/ 1}}，

code

<强> Updated Demo

在输入字段中输入时隐藏div - jQuery

1 个答案: