如何使用带有 ajax 的引导按钮更改引导轮播上的幻灯片？答案

【问题标题】：How to change slide on a bootstrap carousel using a bootstrap button with ajax?如何使用带有 ajax 的引导按钮更改引导轮播上的幻灯片？
【发布时间】：2018-03-10 22:52:08
【问题描述】：

我正在尝试使用下面的 ajax 代码更改引导轮播上的幻灯片。我在第一张幻灯片上有我的注册表单，第二张幻灯片上有登录表格。这个想法是，您可以使用带有注册和登录按钮的轮播上方的按钮组在任一表单之间“滑动”。

我似乎无法找出以下为什么不起作用..

home.html 片段，其中包含按钮并包含轮播

<div style="background-color: #FAF6EA !important;" class=" container col-sm-4 mt-3 py-3 pl-5 pr-4">
    <div class="btn-group btn-group-lg" role="group" aria-label="Basic example">
        <button id="signUpBtn" type="button" class="btn btn-secondary">Sign Up</button>
        <button id ="logInBtn" type="button" class="btn btn-secondary">Log In</button>
    </div>
    <p class="pl-3" style="margin: 0; padding: 0; font-size: larger">Sign up to gain access!</p>
    <br>
    {% include "users/_form_carousel.html" %} // this code is show below
</div>

users/_form_carousel.html 包含轮播，表单位于文件 _register.html 中，该文件包含在此代码中，但我没有在这篇文章中显示它

<div id="myCarouse" class="carousel slide">
   <div class="carousel-inner">
       <div class="carousel-item active">
           {% include "users/_register.html" %}
       </div>
       <div class="carousel-item">
           <img class="d-block w-100" src="..." alt="Second slide">
       </div>
       <div class="carousel-item">
          <img class="d-block w-100" src="..." alt="Third slide">
       </div>
   </div>
</div>

这是我所有的 js 脚本（我想我会展示所有这些脚本，以防万一有人向我指出发生了某种干扰）。

注意：第一个 ajax 脚本将表单数据发送到我的烧瓶后端，应该与轮播无关。

<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"
    integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN"
    crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"
    integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q"
    crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"
    integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl"
    crossorigin="anonymous"></script>
<script src="http://code.jquery.com/jquery-1.8.3.min.js"></script>

<script>

$(document).ready(function () {

    $('form').submit(function (e) {

        $.ajax({
            type: "POST",
            url: $('form').attr('action'), // url
            data: $('form').serialize(), // serializes the form's elements.
            success: function (data) {
                alert("AJAX request successfully completed");
                console.log(data)  // display the returned data in the console.
            }
        });
        e.preventDefault(); // block the traditional submission of the form.
    });


    // Inject our CSRF token into our AJAX request.
    $.ajaxSetup({
        beforeSend: function (xhr, settings) {
            if (!/^(GET|HEAD|OPTIONS|TRACE)$/i.test(settings.type) && !this.crossDomain) {
                xhr.setRequestHeader("X-CSRFToken", "{{ form.csrf_token._value() }}")
            }
        }
    })
});
</script>

<script>
$(document).ready(function(){
    alert("This has been executed"); // this alert does actually show up when the page is loaded
    // Activate Carousel
    $("#myCarousel").carousel("pause");

    // Go to the second item
    $("#signUpBtn").click(function(){
        $("#myCarousel").carousel(1); 
        alert("go to second Item"); // this should show up when I click the button but it does not show up
    });

    // Go to the third item
    $("#logInBtn").click(function(){
        $("#myCarousel").carousel(2);
        alert("go to third Item"); // neither does this

    });

});
</script>

感谢您查看此内容

【问题讨论】：

标签： javascript ajax twitter-bootstrap flask

【解决方案1】：

好的，我发现了问题，因此将在此处留下答案以供文档使用。

我删除了以下脚本，它现在可以按预期工作：

<script src="http://code.jquery.com/jquery-1.8.3.min.js"></script>

Bootstrap 已经使用了 js，我猜这是覆盖了它。

【讨论】：