取消第一个 Ajax 请求时，Bootstrap Alert Div 不显示在第二个 ajax 请求上答案

【问题标题】：Bootstrap Alert Div is not display on second ajax request when cancel on first Ajax request取消第一个 Ajax 请求时，Bootstrap Alert Div 不显示在第二个 ajax 请求上
【发布时间】：2017-05-22 07:36:07
【问题描述】：

我的 html 文件中有一个可关闭的警报，该警报在启动时隐藏。代码如下。

<div class="alert alert-dismissible" role="alert" id="msgdiv" style="margin-bottom:5px;display: none;">
    <button type="button" class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">&times;</span></button>
    <span id="emsg"></span>
</div>

现在我发送一个 Ajax 请求来提交表单并根据响应，首先我显示这个隐藏到现在的 div，然后向这个 div 添加成功或错误类。

console.log($("#msgdiv"));
$("#msgdiv").show();
if (result.is_success) {
    $("#msgdiv").removeClass("alert-warning");
    $("#msgdiv").addClass("alert-success");

} else {
    $("#msgdiv").removeClass("alert-success");
    $("#msgdiv").addClass("alert-warning");
}
$("#emsg").html(result.message);

现在当第一次返回响应时，会显示这个 div。我通过单击十字按钮取消 div。
我第二次使用 Ajax 提交具有新值的表单而没有刷新页面，并且此 div 不显示。两种情况都返回相同的结果。我在 JS 代码中打印了两种场景中的 div 元素，下面是输出。

第一次：

[div#msgdiv.alert.alert-dismissible, context: document, selector: "#msgdiv"]

第二次：

n.fn.init {context: document, selector: "#msgdiv"}

更多细节见下图。

为什么会这样？为什么控制台日志有差异？从 HTML 和 JS 的角度来看，它的含义是什么。

【问题讨论】：

嗨。您作为示例显示的第一个 JS 代码属于一个函数，还是在您的新 Ajax 响应之后总是调用的东西？我们可以构建一个小提琴或可运行的代码来更好地重现你的案例

标签： javascript jquery html css ajax

【解决方案1】：

当警报关闭时，它会从 DOM 中移除。

如果您想稍后再次出现警报，请删除关闭按钮中的 data-dismiss="alert"，如下所示：

<div class="alert alert-dismissible" role="alert" id="msgdiv" style="margin-bottom:5px;display: none;">
    <button type="button" class="close" aria-label="Close"><span aria-hidden="true">&times;</span></button>
    <span id="emsg"></span>
</div>

然后，绑定关闭按钮以在按下警报时简单地隐藏警报：

$('.alert .close').click(function(){
   $(this).parent().hide();
});

【讨论】：