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添加/删除类不工作第二次

回答

相关问题