javascript - Bootstrap 通知 - JS 函数仅在第一次迭代时淡化通知

Question

我有以下 JS 函数创建一个带有引导类的 div:

function showDiv() {
    let div = document.createElement("div");
    div.innerHTML = '<div id="newAlert" class="alert alert-info">Hello</div>'
    document.body.appendChild(div);
$("#newAlert").delay(3000).fadeOut();

一个 HTML 按钮将触发此功能并在屏幕上显示 Bootstrap 通知，该通知将在 3 秒后淡出。

问题是在第一次淡出后，再次点击按钮会让通知再次出现，但不会在第二次按钮点击时淡出。我需要通知在每次单击按钮时出现并淡出而不重新加载页面。

我最初尝试围绕 jquery 部分实现一个“if 1==1”语句，但这并没有改变任何东西。

有人能给我指出正确的方向，说明为什么通知只消失一次吗？任何帮助将非常感激。

Answer 1

.fadeOut() 通过将匹配的元素淡化为透明来隐藏它们。 DOM 中将第二次出现两个 #newAlert。

function showDiv() {
  let div = document.createElement("div");
  div.innerHTML = '<div id="newAlert" class="alert alert-info">Hello</div>'
  document.body.appendChild(div);
  $("#newAlert").delay(3000).fadeOut('slow', function() {
    $(this).remove();
  });
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">

<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>

<button class="btn btn-primary" onclick="showDiv()">Alert!</button>