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

問題

現在、clickハンドラーをpage load.errorに存在する任意の要素にバインドしています。ただし、メッセージはページの読み込み後に動的に DOM に追加されるため、ハンドラーはそれらにバインドされません。.errorclick

解決

イベント ハンドラーを要素に直接バインドする代わりに、DOM の上位にあるイベント ハンドラーを、ページの読み込み時に存在する親要素に委任する必要があります。

例えば：

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

これにより、DOM に含まれるclickすべての要素 (現在および将来の両方) にハンドラーが適用されます。.errorもちろん、たとえば$('#some-form')の代わりに にアタッチすることで、委任の範囲を制限でき$(document)ます。

于 2013-03-09T23:04:20.903 に答える
0

Bootstrap アラート メッセージを試してみてください。独自の閉じるボタンが付いているため、使い方は非常に簡単で、ページ内での操作も非常に簡単です。他の DOM 要素と同じように扱うことができますが、面倒なことはありません。あなたがしなければならないことは、彼らのライブラリをインストールし、彼らのクラス/javascriptを使用して、あなたが望むものを手に入れることです. 慣れるまで少し時間がかかりますが、信じられないほど強力な追加機能です。

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

于 2013-03-10T00:17:37.473 に答える