无法在Javascript中将动态项目添加到Owl Carousel

Question

我正在尝试将项目动态添加到Owl轮播中。这是我的做法：

的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>