Can not add dynamically items to Owl Carousel in Javascript

Question

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');
  });

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

EDIT:

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.

Answer 1

There can be two regular errors:

1. The button does not exist in time you create onclick event.
   • make sure the button exists in time you assign the event.
2. The carousel is inside the <form> and clicking the button submits the entire form (pay attention at browser page loading). Error shown here.
   • 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>

Answer 2

It seems that all answers here work perfectly, but not in my case. Probably the events that are called are in conflict with others. So I did it another way:

Clear the content of the carousel

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

Append the new content into the carousel

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

Where imgs is an array of image urls, and createImgCarousel a function that creates a carousel item.

Finally reinitialize the carousel

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

It's maybe not so clean, but it works for now !