在JavaScript中无法将动态的项目添加到猫头鹰轮播

Question

我正在尝试将项目动态添加到猫头鹰旋转频率上。这是我的做法：

html

<div id="avatar-carousel" class="owl-carousel lesson-carousel">
                                            <div class="item item-logo">
                                              <div class="product-item">
                                                <div class="carousel-thumb" style="height: 77px!important;width: 70px;" >
                                                      <img src="http://placehold.it/140x100" alt="">
                                                </div>
                                              </div>
                                            </div>
                                              <!-- Start Item -->
                                        </div>
                                        <button id="click">
                                        click
                                        </button>

JS

$("#avatar-carousel").owlCarousel({
      items: 5
  });
  $("#click").click(function(){
    $('#avatar-carousel').trigger('add.owl.carousel', ['<div class="item"><p>' + 'hh' + '</p></div>'])
                    .trigger('refresh.owl.carousel');
  });

此代码什么都没发生。我看不到错误。这是小提琴：jsfiddle。

编辑：

似乎是正确的，因为它在小提琴中工作。我忘了提到旋转木马的工作正常，一开始就正确加载了。问题是在尝试添加项目时。什么都没有发生，没有错误，但是没有添加项目。

Answer 1

可以有两个常规错误：

1. 您创建onclick事件的时间不存在该按钮。
   • 确保按钮随着时间的推移分配事件而存在。
2. 轮播在<form>内部，然后单击按钮提交整个表格(请注意浏览器页面加载(。此处显示的错误。
   • 解决方案是防止事件的默认操作：

$(document).ready(function() {
    $("#avatar-carousel").owlCarousel({
        nav: true,
        items: 5
    });
});
$("#click").click(function(e) {
    e.preventDefault(); //-- prevent form submit
    $('#avatar-carousel').trigger('add.owl.carousel', ['<div class="item"><img src="http://placehold.it/140x100" alt=""></div>'])
        .trigger('refresh.owl.carousel');
});

<link href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.2.1/assets/owl.theme.default.min.css" rel="stylesheet"/>
<link href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.2.1/assets/owl.carousel.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.2.1/owl.carousel.min.js"></script>
<form action="" method="post">
    <div id="avatar-carousel" class="owl-carousel">
        <div class="item item-logo">
            <img src="http://placehold.it/140x100" alt="">
        </div>
    </div>
    <button id="click">
        click
    </button>
</form>

Answer 2

看来，这里的所有答案似乎都很好，但就我而言而言。可能被称为事件与他人冲突。所以我以另一种方式做到了：

清除轮播的内容

$('#avatar-carousel').html('');

将新内容附加到轮播

imgs.forEach(function(img) {
  $('#avatar-carousel').append(createImgCarousel(img));
});

其中imgs是图像URL的数组，并创建创建旋转木马项目的iMgcarousel a函数。

最终重新初始化旋转木马

$("#avatar-carousel").owlCarousel({
  navigation: true,
  pagination: true,
  slideSpeed: 1000,
  stopOnHover: true,
  autoPlay: true,
  items: 5,
  itemsDesktopSmall: [1024, 3],
  itemsTablet: [600, 1],
  itemsMobile: [479, 1]
});

也许不是那么干净，但现在可以工作！