在 bootstrap 5.1 和 Ajax 中关闭警报

Question

我正在使用 bootstrap 5.1 alerts 在 Ajax 调用时显示特定消息。 另外，如果需要，我想解除警报。为此，bootstrap 允许有一个关闭按钮。

这是我的 php：

<div class="alert alert-warning alert-dismissible" role="alert" style="display:none;" id="message-response-given">
<button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
</div>

以及Ajax调用的相关js：

document.getElementById("message-response-given").innerHTML = res.message;
$('#message-response-given').fadeIn();

这显示了消息，但不是 Ajax 调用后的按钮。

我已阅读以下内容（引导警报，与上述相同的链接）：

当警报被解除时，该元素将从页面结构中完全删除。如果键盘用户使用关闭按钮关闭警报，他们的焦点将突然丢失，并根据浏览器重置到页面/文档的开头。出于这个原因，我们建议包含额外的 JavaScript 来侦听 closed.bs.alert 事件并以编程方式将 focus() 设置到页面中最合适的位置。如果您打算将焦点移动到通常不会获得焦点的非交互式元素，请确保将 tabindex="-1" 添加到元素。

但我不知道该怎么做.....

Answer 1

你在设置时覆盖了按钮html：

document.getElementById("message-response-given").innerHTML = res.message;

您需要调用append 并将消息作为参数传递。由于您使用的是 jQuery，因此您可以将脚本简化为链式单行：

$('#message-response-given').append(res.message).fadeIn();

例如：

$('#message-response-given').append("message").fadeIn();

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">


<div class="alert alert-warning alert-dismissible" role="alert" style="display:none;" id="message-response-given">
  <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
</div>


<script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>