使用 jQuery 动态添加项目后，Bootstrap Carousel 无法正常工作答案

【问题标题】：Bootstrap Carousel not working after adding items dynamically with jQuery使用 jQuery 动态添加项目后，Bootstrap Carousel 无法正常工作
【发布时间】：2017-05-11 22:46:42
【问题描述】：

我有如下图所示的 Bootstrap Carousel

<div class="carousel slide multi-item-carousel" id="theCarousel3">
                <div class="carousel-inner">
                  <div class="item active">
                    <div class="col-lg-4">
                      <img src='images/image1.jpg' id='img' class='img-responsive' width='250' height='300' />
                    </div>
                  </div>
                  <div class="item">
                    <div class="col-lg-4">
                      <img src='images/image2.jpg' id='img' class='img-responsive' width='250' height='300' />
                    </div>
                  </div>
                  <div class="item">
                    <div class="col-lg-4">
                      <img src='images/image3.jpg' id='img' class='img-responsive' width='250' height='300' />
                    </div>
                  </div>
                </div>
                <a class="left carousel-control" href="#theCarousel" data-slide="prev"></a>
                <a class="right carousel-control" href="#theCarousel" data-slide="next"></a>
              </div>

它可以正常工作，但是当我通过附加相同的 html 块来使用 jQuery 添加图像时，它不再起作用了：

$('#myContent').append("<div class='carousel slide multi-item-carousel' id='theCarousel3'><div class='carousel-inner'>");

  for(var x = 0; x < imageCount; x++) {
    var imgElement = "<div class='item'><div class='col-lg-4'><img src='"
                      + pictures[x].path + "' id='img" + x +
                      "' class='img-responsive' width='250' height='300' /></div></div>";
    
    $('#myContent').append(imgElement);
    if(x == 0) $('#theCarousel3 .item').addClass('active');
  }

  $('#myContent').append("</div><a class='left carousel-control' href='#theCarousel3' data-slide='prev'></a><a class='right carousel-control' href='#theCarousel3' data-slide='next'></a></div>");

我什至为第一个项目添加了活动类，这在我看来是一个可能的问题但仍然无法正常工作，我看到的是一个一个添加的图像但没有滑动。这里可能是什么问题，请帮助？谢谢。

【问题讨论】：

您将 imgElement 添加到 #myContent，而不是添加到您在第 1 行创建的 .carousel-inner，因此您不会创建与上图相同的 DOM 树。你的.carousel-control 也是如此——那些属于.carousel 而不是#myContent。

标签： javascript jquery html twitter-bootstrap

【解决方案1】：

您需要将图像添加到与其他图像相同的 DOM 元素中。

应该是 $('#myContent').append(imgElement); 而不是

$('#theCarousel3 .carousel-inner').eq(0).append(imageElement);

您也许可以摆脱 eq(0) 部分，但我不确定这是否可行，因为类选择器是多个。

另一种选择是将myContent id 添加到您的 carousel-inner 元素中

您也没有像创建轮播一样创建有效的 html

试试这个：

$(function() {
  var imgElement,
    pictures = [
      'https://storage.googleapis.com/gweb-uniblog-publish-prod/static/blog/images/google-200x200.7714256da16f.png',
      'https://lh3.googleusercontent.com/Rz-Ob1uRO2Xch40qHYgxpZitc3vZzxjeeSHVaNazn4dUny-AqGK0hLXUxhTpg4qgATP6VdlvZPYv_o0=s559-no',
      'http://blog.suite-logique.fr/wp-content/uploads/2014/01/G7N0lnxM.jpeg',
      'http://inspiratron.org/wp-content/uploads/2014/07/google-hummingbird.jpg'
    ]
    wrapper = $('#myContent'),
    carousel = $('<div/>', {
      id: "theCarousel3",
      "class": "carousel slide multi-item-carousel",
      append: '<div class="carousel-inner"></div><a class="left carousel-control" href="#theCarousel3" data-slide="prev"></a><a class="right carousel-control" href="#theCarousel3" data-slide="next"></a>'
    }),
    carouselInner = carousel.find('.carousel-inner').eq(0);

  wrapper.append(carousel);
  carousel.carousel();
  for (var i = 0; i < pictures.length; i++) {
    imgElement = $('<div/>', {
      "class": "item" + (i ? '' : ' active'),
      append: $('<div/>', {
        "class": 'col-lg-4',
        append: $('<img/>', {
          src: pictures[i],
          id: 'img' + i,
          "class": 'img-responsive',
          height: 300
        })
      })
    })
    carouselInner.append(imgElement);
  }
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<div class="container-fluid">
  <div id='myContent'></div>
</div>

【讨论】：

谢谢我更正了，但现在我只看到一张静止图像而不是多张图像滑动。我什至复制了通过 jQuery 附加的 html 块并将它们作为静态 html 并且它工作正常！是不是很疯狂。
好的，我只是注意到您没有创建有效的 html，尽管您只是将图像添加到现有的轮播中。更新答案
@aliencity 请将此答案标记为已接受，除非仍有问题。

【解决方案2】：

注意：第一个 div 有 'item' 和 'active' 类，所有其他 div 只有 'item' 类然后它会工作，否则它将无法工作。

             <div class="item active">
                <div class="col-lg-4">
                  <img src='images/image1.jpg' id='img' class='img-responsive' width='250' height='300' />
                </div>
              </div>
              <div class="item">
                <div class="col-lg-4">
                  <img src='images/image2.jpg' id='img' class='img-responsive' width='250' height='300' />
                </div>
              </div>
              <div class="item">
                <div class="col-lg-4">
                  <img src='images/image3.jpg' id='img' class='img-responsive' width='250' height='300' />
                </div>

它对我有用，希望它也对你有用。谢谢！！！！！！！！！

【讨论】：