Класс добавления/удаления JQuery не работает во второй раз

Question

У меня есть форма регистрации пользователя с некоторой информацией. При отправке выполняется ajax-вызов, который вставляет данные в БД и возвращает код состояния. В зависимости от статуса я показываю div. У div есть начальный класс «скрытый» и кнопка закрытия. По возвращении из php я удаляю «скрытый» класс и добавляю класс «alert-danger» или «alert-success».

После того, как пользователь нажимает кнопку «закрыть» (x), я снова добавляю «скрытый» класс и проверяю, имеет ли элемент класс «опасность оповещения» или «предупреждение-успех» и удаляет его. Это работает (или, по крайней мере, скрывается) в первый раз. Однако div не появляется во второй раз.

Что мне здесь не хватает?

Вот ДИВ

<div class="alert alert-block fade in status hidden"> 
<button type="button" class="close" data-dismiss="alert">&times;</button> 
<h4 class="message-head"></h4> 
<p class="message"></p> 
</div> 

Вот код запуска на успех/ошибка

$.ajax({ 
    type:"post", 
    url:"register.php", 
    data:"name="+name+"&phone="+phone+"&email="+email+"&msg="+msg, 
    success:function(data){ 

    if(data.status === 'success'){ 
    //show the status msg 
    $('.message-head').text("Thank You"); 
    $('.message').text("Your Request has been taken"); 
    $(".status").removeClass("hidden").addClass('alert-success'); 

     }else { 
    $('.message-head').text("Sorry"); 
    $('.message').text("There is some Error. Please Try Again Later"); 
    //alert(data.status); 
    $('.status').removeClass('hidden').addClass('alert-danger'); 
}} 

А вот код для кнопки закрытия нажмите

$('.close').click(function(){ 
if ($('.status').hasClass("alert-danger")) { 
$('.status').removeClass("alert-danger").addClass("hidden"); 
}else if ($('.status').hasClass("alert-success")) { 
$('.status').removeClass("alert-success").addClass("hidden"); 
} 
}); 

Answer 1

Я не совсем конечно, но я считаю, что закрытие предупреждений Bootstrap должно работать из коробки, когда вы открываете их с помощью bootstra Функция JS.

Это должно работать для открытия:

$('.message-head').text("Thank You"); 
$('.message').text("Your Request has been taken"); 
$('.alert').alert(); 

Код для закрытия предупреждения не требуется, потому что тревога автоматически закрывается, как в начальной загрузки, например http://getbootstrap.com/javascript/#alerts

EDIT: Другой подход должен был бы создайте предупреждение с помощью javascript. Это было бы решением обеих проблем. (См JSFiddle)

Answer 2

Я собрал простой скрипку для вас

Ссылка: http://jsfiddle.net/qyyegwhu/1/

Вы включая класс .hidden в CSS:

.hidden{ 
    display: none; 
} 

У меня возникли проблемы тиражирование проблема иначе?