Почему Bootstrap не работает во время выполнения, когда моя страница загружается во время выполнения?

Я пытаюсь использовать карусель из Bootstrap Twitter. Карусель работает точно так же, как я хочу, когда я помещаю html прямо в мой .html-файл. Но я пытаюсь загрузить страницу динамически. Когда я загружаю его, дисплей работает нормально, и отображается только активный элемент. Это заставляет меня думать, что Bootstrap работает, но элементы не переключаются.Почему 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>

Однако, когда я пытаюсь загрузить содержимое из внешнего файла, он не работает. Начальный дисплей по-прежнему правилен, но движение каруселей больше не существует. Таким образом, использование классов бутстрапа 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?

источник

2015-04-15 Evorlor

мое предположение бутстраповских скрипты запускаются, прежде чем ваш контент получает отображаются –

Проверьте консоль браузера на наличии ошибок. – j08691

@ j08691 Нет :-( – Evorlor

Загрузочный javascript, который обнаруживает вашу карусель, выполняется до того, как html для карусели находится на странице. Вы можете вручную инициализировать карусель

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

источник

2015-04-15 20:03:47 mnickell

Любые предложения о том, где и как это вызывать? Успех с ним – Evorlor

вы можете сделать что-то подобное в вашем load-carousel.js: $ ('# test'). load ('carousel.html', function() {$ ('. carousel'). carousel() ;}), так что функция карусели вызывается, когда нагрузка завершена – mnickell

Почему Bootstrap не работает во время выполнения, когда моя страница загружается во время выполнения?

ответ

Смежные вопросы