为什么在运行时加载我的页面时，Bootstrap 在运行时不起作用？答案

【问题标题】：Why doesn't Bootstrap work during runtime when my page is loaded during runtime?为什么在运行时加载我的页面时，Bootstrap 在运行时不起作用？
【发布时间】：2015-04-15 19:03:45
【问题描述】：

我正在尝试使用 Bootstrap Twitter 中的轮播。当我将 html 直接放在 .html 文件中时，轮播的工作方式与我想要的完全一样。但我正在尝试动态加载页面。当我加载它时，显示工作正常，并且只显示活动项目。这让我觉得 Bootstrap 正在工作，但项目不会切换。

这个文件的工作方式和我想要的完全一样，但它都在一个文件中，这不是我想要的：

index.html (Working JSFiddle)

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Carousel</title>
    <meta charset="utf-8">
    <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
</head>
<body>
<div class='container'>
    <div class='carousel slide' data-ride='carousel'>
        <div class='carousel-inner' role='listbox'>
            <div class='item active'>
                <h1>First Horse</h1>
            </div>
            <div class='item'>
                <h1>Second Horse</h1>
            </div>
        </div>
    </div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
</body>
</html>

但是，当我尝试从外部文件加载内容时，它不起作用。初始显示仍然正确，但轮播运动不再存在。所以使用 bootstrap 的 col 类可以工作，但 Bootstrap 的轮播却不行。有谁知道为什么会这样？这是损坏的代码：

index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Carousel</title>
    <meta charset="utf-8">
    <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
</head>
<body>
<section id="test"></section>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
<script src="load-carousel.js"></script>
</body>
</html>

加载-carousel.js

$('#test').load('carousel.html');

carousel.html

<div class='container'>
    <div class='carousel slide' data-ride='carousel'>
        <div class='carousel-inner' role='listbox'>
            <div class='item active'>
                <h1>First Horse</h1>
            </div>
            <div class='item'>
                <h1>Second Horse</h1>
            </div>
        </div>
    </div>
</div>

注意carousel.html 和工作 index.html 的正文是相同的。

有人知道这是什么原因吗？关于如何在使用 Bootstrap 的轮播时以与我相同的方式加载页面的任何想法？

【问题讨论】：

我的猜测是引导脚本在您的内容显示之前被触发
检查浏览器控制台是否有错误。
@DanBeaulieu 有关修复的任何想法？
如果可能的话，您可以让动态内容包含脚本，以便在加载时触发它

标签： jquery html twitter-bootstrap carousel

【解决方案1】：

检测轮播的引导 javascript 在轮播的 html 出现在页面上之前执行。您可以通过

手动初始化轮播

$('.carousel').carousel();

【讨论】：

关于在哪里以及如何调用它的任何建议？我没有成功。
你可以在你的 load-carousel.js 中做这样的事情： $('#test').load('carousel.html', function(){ $('.carousel').轮播（）；}）；以便在加载完成时调用轮播函数