Question

我有一个简单的登录表单，上面有电子邮件和密码我有这个代码来验证电子邮件

$(document).ready(function() {

$('#login-submit').click(function() {

    $(".error").hide();
    var hasError = false;
    var emailReg = /^([\w-\.]+@([\w-]+\.)+[\w-]{2,4})?$/;

    var emailaddressVal = $(".email").val();
    if(emailaddressVal == '') {
        $(".email").after('<span class="error">Please enter your email address.</span>');
        hasError = true;
    }

    else if(!emailReg.test(emailaddressVal)) {
        $(".email").after('<span class="error">Enter a valid email address.</span>');
        hasError = true;
    }

    if(hasError == true) { return false; }

    });
});

.error类的跨度（根据我的设计）隐藏了输入元素。

我想在点击时再次隐藏错误消息

$(document).ready(function() {
$('.error').click(function() {
    $(".error").remove();
});

});

但这没有任何作用。谁知道我在这里做错了什么？

Answer 1

<强>问题

目前，您正在将click处理程序绑定到页面加载上存在的任何.error元素。但是，在页面加载后，您的.error消息会动态地添加到DOM中，因此您的click处理程序不会绑定到它们。

<强>解决方案

不应直接绑定事件处理程序到元素，而应该将事件处理程序委托更高的DOM到页面加载时存在的父元素。

例如：

$(document).ready(function() { $(document).on('click','.error', function() { $(this).remove(); }); });

这将使click处理程序适用于DOM中包含的任何.error元素，包括当前和未来。您当然可以通过将其附加到$('#some-form')而不是$(document)来限制授权范围。

Answer 2

您可能想尝试Bootstrap警报消息。它们使用起来非常简单，并且在页面内工作非常简单，因为它们带有自己的关闭按钮。您可以像处理任何其他DOM元素一样对待它们，但没有麻烦。您所要做的就是安装他们的库并使用他们的类/ javascript来获得您想要的东西。需要一点时间来适应，但这是一个非常强大的补充。

http://twitter.github.com/bootstrap/components.html#alerts

单击时隐藏错误消息

2 个答案: