Bootstrap Toast未显示Bootstrap Modal何时关闭

Question

我正在为公司开发一个公司目录应用程序，以跟踪其员工，部门和位置以及哪些员工在哪个部门以及哪个位置等。我的应用程序需要要求用户在他们对数据库中的数据进行更改，并在数据库中成功进行更改，并返回代码200，但还需要向用户确认更改已成功进行。我正在尝试使用Bootstrap Toast向用户显示一条消息，但我似乎无法出现吐司。您会看到，我已经在代码中放置了敬酒的HTML，并且我正在使用： -

$('#successToast').toast('show');

但是我似乎无法让吐司出现。

我的控制台等没有显示错误，我已经检查了整个页面，以确保它不会出现在底部的其余内容下方，但事实并非如此。我非常困惑，现在不确定现在可以解决问题。

我的代码：（我只发布了代码的相关部分，但是我可以在需要时发布所有代码）

index.html

<!--Form to add location-->
          <div class="modal fade" id="addLocationModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
            <div class="modal-dialog">
              <div class="modal-content">
                <div class="modal-header">
                  <h5 class="modal-title" id="exampleModalLabel">Add New Location</h5>
                  <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                
                <form id="addLocationForm" onsubmit="addLocation()">
                <div class="modal-body">
                  <input type="text" class="form-control" name="locationName" id="newLocationName" placeholder="Location Name..." >
                </div>
                <div id="add-location-modal-footer" class="modal-footer">
                  <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
                  <button id="add-location-step-one-button" type="button" class="btn btn-primary">Add</button>
                </div>
                <div id="add-location-confirmation-modal-footer" class="modal-footer">
                  <p>Are you sure you wish to add <span id="locationToAdd"></span> ?</p>
                  <button id="add-location-go-back-button" type="button" class="btn btn-danger" >Go Back</button>
                  <button type="submit" class="btn btn-success">Save</button>
                </div>
              </form>
              </div>
            </div>
          </div>
          <!--End of add location-->
    <!--Success Toast-->
              <div id="successToast" aria-live="polite" aria-atomic="true" style="position: relative; min-height: 200px;" data-delay="10000">
                <div class="toast" style="position: absolute; top: 0; right: 0;">
                  <div class="toast-header">
                    <img src="" class="rounded mr-2" alt="">
                    <strong class="mr-auto">Success</strong>
                    <button type="button" class="ml-2 mb-1 close" data-dismiss="toast" aria-label="Close">
                      <span aria-hidden="true">&times;</span>
                    </button>
                  </div>
                  <div class="toast-body">
                    <span id="changedVariable"></span> <span id="changeAdjective"></span>
                  </div>
                </div>
              </div>
            
        </body>
            <script src="js/jquery.js"></script>
            <script src="js/bootstrap/bootstrap.js"></script>
            <script src="js/bootstrap/bootstrap.min.js"></script>
            
            <script src="js/script.js"></script>
            
            <script src="https://kit.fontawesome.com/5dd4ce85ea.js" crossorigin="anonymous"></script>

script.js：

$('#add-location-step-one-button').on('click', function(){
  
  $('#newLocationName').attr("disabled", true);
  $('#add-location-modal-footer').hide();
  $('#add-location-confirmation-modal-footer').show();
  let newLocation = $('#newLocationName').val();
  $('#locationToAdd').html(newLocation);
  
});

$('#add-location-go-back-button').on('click', function(){
  $('#add-location-confirmation-modal-footer').hide();
  $('#newLocationName').attr("disabled", false);
  $('#add-location-modal-footer').show();
});

function addLocation() {
  let newLocation = $('#newLocationName').val();


  $.post(
    'php/insertLocation.php'
  ,
  {
    newLocation: newLocation
  },
  function(data){
    if(data.status.code == 200){
      $('#changedVariable').html(newLocation);
      $('#changeAdjective').html('added');
      $('#successToast').toast('show');
    }
  }
  )
}

Answer 1

来自Bootstrap文档。 “出于绩效原因，吐司是选择加入的，因此您必须自己初始化它们。”

结帐他们的文档

var toastElList = [].slice.call(document.querySelectorAll('.toast'))
var toastList = toastElList.map(function (toastEl) {
  return new bootstrap.Toast(toastEl, option)
})