单击时隐藏错误消息

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 更高层的事件处理程序委托到页面加载时存在的父元素，而不是将事件处理程序直接绑定。 p>

例如：

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

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

Answer 2

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

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