引导轮播在 AJAX 中不起作用

Question

I am trying to load bootstrap carousel using AJAX.我正在尝试使用 AJAX 加载引导轮播。 AJAX return HTML data. AJAX 返回 HTML 数据。 HTML is load into my page and all the related JS and CSS is loaded into the page as well. HTML 被加载到我的页面中，所有相关的 JS 和 CSS 也被加载到页面中。 But carousal is not scrolling.但是carousal不是滚动的。

I want to create widget of Jquery which run this carousel any website, after just include the.js on any website我想创建 Jquery 的小部件，它在任何网站上运行这个轮播，只需在任何网站上包含.js

Here is my code index.php这是我的代码索引。php

<!doctype html>
<html lang="en">
<head>
    <title>Example of the Demo</title>
</head>
<body>
    <div class="container">
        <div class="row">
            <div class="col-sm">
                One of three columns
            </div>
            <div class="col-sm">
                One of three columns
            </div>
            <div class="col-sm">
                One of three columns
            </div>
        </div>
        <div id="carousel"></div>
    </div>    
    <script src="widget.js"></script>
</body>
</html>

Widget.js小部件.js

(function () {

    // Localize jQuery variable
    var jQuery;

    /******** Load jQuery if not present *********/
    if (window.jQuery === undefined || window.jQuery.fn.jquery !== '3.4.1') {
        var script_tag = document.createElement('script');
        script_tag.setAttribute("type", "text/javascript");
        script_tag.setAttribute("src", "https://code.jquery.com/jquery-3.4.1.min.js");        
        script_tag.setAttribute("crossorigin", "anonymous");
        if (script_tag.readyState) {
            script_tag.onreadystatechange = function () { // For old versions of IE
                if (this.readyState == 'complete' || this.readyState == 'loaded') {
                    scriptLoadHandler();
                }
            };
        } else { // Other browsers
            script_tag.onload = scriptLoadHandler;
        }
        // Try to find the head, otherwise default to the documentElement
        (document.getElementsByTagName("head")[0] || document.documentElement).appendChild(script_tag);
    } else {
        // The jQuery version on the window is the one we want to use

        jQuery = window.jQuery;
        main();
    }

    /******** Called once jQuery has loaded ******/
    function scriptLoadHandler() {
        // Restore $ and window.jQuery to their previous values and store the
        // new jQuery in our local jQuery variable
        jQuery = window.jQuery.noConflict(true);
        // Call our main function
        main();
    }

    /******** Our main function ********/
    function main() {
        jQuery(document).ready(function ($) {

            /******* Load CSS *******/
            var css_link = $("<link>", {
                rel: "stylesheet",
                type: "text/css",
                href: "http://localhost/demo/php_test_hrn/css/bootstrap.min.css"
            });
            css_link.appendTo('head');

            var script_tag = document.createElement('script');
            script_tag.setAttribute("type", "text/javascript");
            script_tag.setAttribute("src", "http://localhost/demo/php_test_hrn/js/bootstrap.min.js");
            // Try to find the head, otherwise default to the documentElement
            (document.getElementsByTagName("head")[0] || document.documentElement).appendChild(script_tag);

            /******* Load HTML *******/
            // We can use jQuery 1.4.2 here
            $.get("http://localhost/demo/php_test_hrn/carousel.php", function (data) {
                $("#carousel").html(data);
            });

        });
    }

}()); // We call our anonymous function immediately

Carousel.php轮播.php

<div class="row">
    <div id="carouselExampleSlidesOnly" class="carousel slide" data-ride="carousel">
        <ol class="carousel-indicators">
            <li data-target="#carouselExampleIndicators" data-slide-to="0" class="active"></li>
            <li data-target="#carouselExampleIndicators" data-slide-to="1"></li>
            <li data-target="#carouselExampleIndicators" data-slide-to="2"></li>
        </ol>
        <div class="carousel-inner">
            <div class="carousel-item active">
                <img src="http://localhost/demo/php_test_hrn/images/img1.jpg" class="d-block w-100" alt="...">
            </div>
            <div class="carousel-item">
                <img src="http://localhost/demo/php_test_hrn/images/img2.jpg" class="d-block w-100" alt="...">
            </div>
            <div class="carousel-item">
                <img src="http://localhost/demo/php_test_hrn/images/img3.jpg" class="d-block w-100" alt="...">
            </div>
        </div>
        <a class="carousel-control-prev" href="#carouselExampleControls" role="button" data-slide="prev">
            <span class="carousel-control-prev-icon" aria-hidden="true"></span>
            <span class="sr-only">Previous</span>
        </a>
        <a class="carousel-control-next" href="#carouselExampleControls" role="button" data-slide="next">
            <span class="carousel-control-next-icon" aria-hidden="true"></span>
            <span class="sr-only">Next</span>
        </a>
    </div>
</div>

Answer 1

after the ajax call, you need to run carousel manually via $('.carousel').carousel()在 ajax 调用之后，您需要通过$('.carousel').carousel()手动运行轮播

this should work;这应该有效；

$.get("http://localhost/demo/php_test_hrn/carousel.php", function (data) {
               $("#carousel").html(data);
               setTimeout(function(){ // just being safe
                   $('.carousel').carousel();
               },20);
});

引导轮播在 AJAX 中不起作用

问题描述

1 个解决方案

解决方案1
0 2019-10-09 05:21:23

引导轮播在 AJAX 中不起作用

问题描述

1 个解决方案

解决方案1 0 2019-10-09 05:21:23

解决方案1
0 2019-10-09 05:21:23