3

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

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

});

但这无济于事。有人知道我在这里做错了什么吗？

4

2 回答 2

2

问题

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

解决方案

与其直接将事件处理程序绑定到元素，不如将事件处理程序委托给 DOM 更高层的页面加载时存在的父元素。

例如：

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

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

于 2013-03-09T23:04:20.903 回答
0

You might want to try Bootstrap alert messages. They're really simple to use, and work within your page really simply, as they come with their own close buttons. You can treat them as you would treat any other DOM element, but without the hassle. All you have to do is install their library and use their classes/javascript in order to get what you want. It takes a bit of getting used to, but it's an incredibly powerful addition.

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

于 2013-03-10T00:17:37.473 回答