JQuery添加/刪除類不工作第二次

我有一個表單來註冊用戶的一些信息。提交後，會進行ajax調用，將數據插入到數據庫中，並返回狀態碼。根據狀態，我顯示一個div。該div有一個「隱藏」的初始類和一個關閉按鈕。從PHP返回後，我刪除「隱藏」類並添加「警告 - 危險」或「警告 - 成功」類。JQuery添加/刪除類不工作第二次

一旦用戶點擊關閉（X）按鈕，我又加了「隱藏」類，並檢查元素具有「警報的危險」或「警告 - 成功」級，並刪除這一點。這是第一次（或至少隱藏）。但是，div並不是第二次出現。

它是什麼，我在這裏失蹤？

這裏的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"); 
} 
});

來源

2014-10-20 sisyphus

添加斷點（調試器）到您點擊關閉。第二次檢查時，檢查$（「。status」）選擇器中的內容。 – 2014-10-20 20:13:52

您是否使用引導警報？關閉警報**從dom **中移除元素。所以這可能是這裏發生的事情。也許可以嘗試使用引導'$（）。alert（）'函數。 – 2014-10-20 20:39:49

Mathieu - 我檢查了開發工具。發生什麼事是當我點擊「關閉」按鈕時，整個div消失。因此，第二次無法加載它。 – sisyphus 2014-10-21 05:50:35

我不能完全當然，但我相信關閉Bootstrap警報應該可以在你使用bootstra打開它時開箱即用p JS函數。

這應該開放工作：

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

不需要關閉警報的代碼，因爲警報自動像引導例如關閉http://getbootstrap.com/javascript/#alerts

編輯：另一種方法是用javascript創建警報。這將是你的兩個問題的解決方案。（見JSFiddle）

來源

2014-10-20 20:19:06 phylib

謝謝。這會打開警報，關閉會像你說的那樣自動完成。但是這裏有兩個問題：1.警報危險或警報成功不能應用。和2。一旦我們關閉，如果用戶重新提交表單 – sisyphus 2014-10-21 06:13:04

我把一個簡單搗鼓你

鏈接：http://jsfiddle.net/qyyegwhu/1/

你包括CSS .hidden類：

.hidden{ 
    display: none; 
}

我無法複製否則問題呢？

來源

2014-10-20 20:24:11 remixdesign

，那麼該元素將從dom中移除，而不會再次出現。很奇怪，在您的示例中它工作得非常好，但當我在新文件中使用您的代碼時，它並不是很好。發生什麼事是第一次警報會來。但是當我點擊「關閉」時，整個div消失了。我試過從bootstrap隱藏的類，但我也試圖在CSS中做到這一點。 – sisyphus 2014-10-21 05:48:24

JQuery添加/刪除類不工作第二次

回答

相關問題