当我的页面在运行时加载时，为什么 Bootstrap 在运行时不工作？

Question

我正在尝试使用来自 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 的列类有效，但 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 的轮播工作时以与我相同的方式加载页面有什么想法吗？

Answer 1

bootstrap javascript 检测到您的轮播正在执行，然后轮播的 html 出现在页面上。您可以通过

手动初始化轮播

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

当我的页面在运行时加载时，为什么 Bootstrap 在运行时不工作？

Why doesn't Bootstrap work during runtime when my page is loaded during runtime?

html

jquery

carousel

twitter-bootstrap