无法在Javascript中将动态项添加到Owl Carousel [英] Can not add dynamically items to Owl Carousel in Javascript

问题描述

我正在尝试动态添加项目到猫头鹰旋转木马。我是这样做的：

I'm trying to dynamically add items to an Owl carousel. Here is how I'm doing it:

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 。

Nothing happens with this code. I can't see the error. Here is the fiddle: JSFiddle.

编辑：

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

Seems like the code is correct, as it's working in the fiddle. I forgot to mention that the carousel works just fine, it is loaded correctly in the beginning. The issue is when trying to add items. Nothing happens, no errors but items are not added.

推荐答案

可能有两个常规错误：

1. 当您创建 onclick 事件时，该按钮不存在。
   
   
   
   
   • 确保按钮在您分配事件时存在。
   
   

1. The button does not exist in time you create onclick event.
   • make sure the button exists in time you assign the event.

• 解决方案是预防该事件的默认操作：

• solution would be to prevent default action for the event:

$(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>

这篇关于无法在Javascript中将动态项添加到Owl Carousel的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！