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

Question

我具有以下JS函数，该函数用bootstrap类创建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按钮将触发此功能并在屏幕上显示引导通知，该通知将在3秒后逐渐消失。

问题是，在第一次淡出之后，再次单击按钮将使通知再次出现，但在第二个按钮单击时不会淡出。我需要通知出现并在每个按钮上单击无需重新加载页面即可褪色。

我最初尝试在jQuery部分围绕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>

Answer 2

必须从DOM中删除元素。。

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();
    setTimeout(function() {
    $('#newAlert').remove();
  }, 3500);
}

额外的500ms帐户淡出了淡出。编辑：忘记设置vadeout方法的第二个参数。但是，我会留下答案，因为它有助于强调这一点。

Answer 3

您必须删除淡出时删除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("slow", function() {
      document.body.removeChild(div);
    });
}

<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://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
<button onClick="showDiv()">Show div</button>