无法在Javascript

时间:2017-04-19 14:53:19

标签: javascript jquery owl-carousel

我试图动态地将项目添加到猫头鹰轮播中。我是这样做的:

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

编辑:

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

2 个答案:

答案 0 :(得分:3)

可能有两个常规错误:

  1. 创建onclick事件时,该按钮不存在。
    • 确保按钮在您分配事件时及时存在。
  2. 轮播在<form>内,点击按钮提交整个表单(注意加载浏览器页面)。显示错误here
  3. &#13;
    &#13;
    $(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');
    });
    &#13;
    <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>
    &#13;
    &#13;
    &#13;

答案 1 :(得分:0)

这里的所有答案似乎都很完美,但不是我的情况。可能被调用的事件与其他事件相冲突。所以我采取了另一种方式:

清除轮播的内容

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

将新内容附加到轮播

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

其中imgs是图像网址数组,而createImgCarousel是一个创建轮播项目的函数。

最后重新初始化轮播

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

它可能不那么干净,但现在可以使用了!