使用jQuery动态添加项目后，Bootstrap Carousel无法正常工作 [英] Bootstrap Carousel not working after adding items dynamically with jQuery

问题描述

我有如下所示的Bootstrap Carousel

I have Bootstrap Carousel as shown below

<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的图像时，它不再起作用:

It works fine as it is but when I add images with jQuery by appending same html blocks as shown below it doesn't work anymore:

$('#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>");

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

I have even added the active class for the first item which seem to me a possible issue but still not working, what I see is images added one by one but not sliding. What could be the issue here, any help please? Thanks.

推荐答案

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

you need to add you images to the same DOM element as you other images.

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

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

您也许可以摆脱eq(0)部分，但是由于类选择器是多个，因此我不确定这是否会起作用.

You may be able to get rid of the eq(0) part, but I'm not sure if that will work since class selector is multiple.

另一种选择是将myContent id添加到您的轮播内部元素

the other option is to add the myContent id to your carousel-inner element

您还尝试以创建轮播的方式创建有效的html

you also arent creating valid html the way you are trying to create the carousel

尝试:

$(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动态添加项目后，Bootstrap Carousel无法正常工作的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！