скрыть по щелчку

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 (согласно проекту I» ve got) скрывает входной элемент.

Я хочу, чтобы скрыть сообщение об ошибке еще раз, когда я нажимаю его

$(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 обработчик применить к любому .error элемент включен в DOM, как текущих, так и будущих. Конечно, вы можете ограничить объем делегирования, добавив его, например, в $('#some-form') вместо $(document).

Answer 2

Возможно, вы захотите попробовать оповещения о загрузке. Они действительно просты в использовании и работают на вашей странице по-настоящему просто, поскольку у них есть свои близкие кнопки. Вы можете относиться к ним так же, как к любому другому элементу DOM, но без хлопот. Все, что вам нужно сделать, это установить их библиотеку и использовать их классы/javascript, чтобы получить то, что вы хотите. Это требует немного привыкания, но это невероятно мощное дополнение.

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