如何在运行时使用JavaScript / JQuery向正在运行的现有Bootstrap Carousel中添加一张幻灯片？

Question

我有一个显示客户评论的轮播和一个允许客户进行新评论的用户表格。表格填写完毕后，我想将新的客户评论添加到轮播中。我找不到文档告诉我如何将幻灯片添加到现有的，正在运行的轮播中。

我正在使用Bootstrap 4.3.1。该页面最初加载时在轮播中没有幻灯片。页面准备好（$（document）.ready（））后，我使用$ .getJSON（）从服务器检索幻灯片内容，然后动态生成并将html注入页面。这很好。转盘上装有正确的幻灯片，并开始按预期完全循环。

页面上还有一个表格，允许用户编写新评论并将其发布到网站上。提交表单后（标准的type =“ button”，而不是type =“ submit”），我使用$ .post将新的评论推送到服务器以插入数据库。这也很好。

我遇到问题的地方是我也想更新页面上的轮播，而无需刷新整个页面。

我尝试简单地重新运行在文档准备好时运行的功能，但是将剩余数据留在轮播中，该轮播显示并不会滑动，而其他幻灯片会显示在其上方并滑动。最终，经过两次过渡后，轮播冻结。

我尝试添加代码以清除轮播，然后重新填充。结果相同。

使用这些方法中的任何一种都不会收到任何错误消息。

我认为最简单的解决方案是将单个幻灯片添加到现有轮播中（而不是清除并重新填充），但是我找不到任何有关如何实现的文件。

任何帮助将不胜感激。

这是HTML

  <div class="row">
    <div class="col-10">
      <div id="carouselTestimonials" class="carousel slide" data-ride="carousel" data-interval="12000">
        <div class="row">
          <div class="col-xs-offset-3 col-xs-6 w-100">
            <div class="carousel-inner carousel-Testimonials">
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>

  <div class="testimonial-form">
    <form action="/testimonials" method="post">
      <div class="form-group">
        <input type="text" class="form-control fn" aria-describedby="nameHelp" name="firstName" placeholder="First Name" required autocomplete="off">
        <input type="text" class="form-control li" aria-describedby="nameHelp" name="lastInitial" placeholder="M.I." maxlength="1" minlength="1" required autocomplete="off"><br />
        <small id="nameHelp">Enter your first name and middie initial.</small>
        <input type="text" class="form-control city" aria-describedby="citystateHelp" name="city" placeholder="City">
        <select class="form-control st" aria-describedby="citystateHelp" name="state" placeholder="City">
            <option value="AL">AL</option>
            <option value="AK">AK</option>
                  ...
        </select>
        <small id="citystateHelp">Enter your city and state.</small>
        <textarea class="form-control comment" aria-descrbedby="commentHelp" name="comment" required rows="4" placeholder="Comment"></textarea>
        <small id="commentHelp">Type your comment.</small>
      </div>
      <input type="button" class="btn btn-primary" name="submitTestimonial" value="Submit">
    </form>

这是脚本：

function populateTestimonials() {
  $.getJSON("/testimonials", (data, status) => {
    var carouselItems = "";
    $.each(data, (index, testimonial) => {
      carouselItems += "          <div class=\"carousel-item" + (index == 0 ? " active" : "") + "\">" +
                       "            <div class=\"carousel-content\">" +
                       "              <div class=\"testimonial\">\"" + testimonial.testimonial + "\"</div>" +
                       "              <div class=\"testimonial-author\">- " + testimonial.firstName + " " + testimonial.lastInitial + ".</div>" +
                       "              <div class=\"testimonial-from\">" + testimonial.city + ", " + testimonial.state + "</div>" +
                       "            </div>" +
                       "          </div>"
    });
    $(".carousel-Testimonials").html(carouselItems);
  });
};

$("document").ready(() => {
  populateTestimonials();
});

$("input[name='submitTestimonial']").click(() => {
  // Validate input

  // build object
  var newTestimonial = {
    firstName: $("input[name='firstName']").val(),
    lastInitial: $("input[name='lastInitial']").val(),
    city: $("input[name='city']").val(),
    state: $("select[name='state']").val(),
    comment: $("textarea[name='comment']").val()
  };
  $.post("/testimonials", newTestimonial, (data, status) => {
    $(".testimonial-form").fadeOut();
    if (status == "success") {
      $("#carouselTestimonials").carousel('pause').removeData();
      populateTestimonials();
      $("#carouselTestimonials").carousel(0);
    } else {
      $(".testimonial-error-message").html("Unable to save testimonial");
      $(".testimonial-error").fadeIn();
    }
  });
});

我希望轮播幻灯片在用户提交评论后包括新评论，而无需诉诸刷新网页。