无法在Javascript中将项目动态添加到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');
  });

$（“#化身旋转木马”）.owlCarousel({
项目：5
});
$（“#单击”）。单击（函数（）{
$（“#阿凡达旋转木马”）.trigger（'add.owl.carousel'，[''+'hh'+'
']））
.trigger（'refresh.owl.carousel'）；
});

此代码不会发生任何变化。我看不出错误。这是小提琴：

编辑：

似乎代码是正确的，因为它正在运行。

---

我忘了提到旋转木马工作得很好，它在一开始就正确加载了。问题在于尝试添加项目时。没有发生任何事情，没有错误，但没有添加项目

可能有两个常规错误：

该按钮在您创建

onclick

事件时不存在。

• 确保按钮在分配事件时存在

转盘位于

内，单击按钮提交整个表单（请注意浏览器页面加载）。显示错误。

• 解决方案是为该活动：

$（文档）.ready（函数（）{
$（“阿凡达旋转木马”）。猫头鹰旋转木马({
导航：是的，
项目：5
});
});
$（“#点击”）。点击（功能（e）{
e、 preventDefault（）；/--阻止表单提交
$（“#阿凡达旋转木马”）.trigger（'add.owl.carousel'，[''））
.trigger（'refresh.owl.carousel'）；
});

点击
这里的所有答案似乎都很完美，但我的情况并非如此。所调用的事件可能与其他事件冲突。所以我用另一种方式：

清除传送带的内容

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

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

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

将新内容附加到旋转木马中

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

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

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

其中，imgs是一个图像URL数组，createImgCarousel是一个创建旋转木马项目的函数

最后重新初始化旋转木马

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

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

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

它可能不太干净，但现在可以用了
 您没有保存小提琴-它是空的
uncaughttypeerror:$（…）。owlCarousel不是一个函数
，您需要提供更多信息。修复这个问题（例如，至少加载CSS/JS资源）。我有一个基本的版本在这里工作：@DaveNewton，我真的不明白为什么会发生这个错误。我的代码和Dave Newton的唯一区别是在他的代码中使用了一个中间变量。@DaveNewton。糟糕的是，我知道我们可以增加外部资源。carousel.js文件丢失。我刚刚加了。所以我知道它在这里起作用。虽然它不在我的代码中，但我看不到任何形式。或者一个提交按钮。我怀疑这就是问题所在。我正在编写的代码有点不同。我只是放了一个简化按钮，但它实际上是在一个自动完成更改事件中。所有事情都正常执行，即使是owl.add触发器之后的console.log。但是，项目添加本身不起作用。可能当时没有创建旋转木马，或者类似的东西。尝试打开控制台并直接执行代码
$（'#avatar carousel'）.trigger（'add.owl.carousel'，['WORKING']）