Issue with jquery zoom and bootstrap multi item carousel

Question

I'm working on a product carousel which needs a zoom functionality. The carousel is bootstrap, customised to display two items per slide. I'm then using jQuery zoom for the product zoom but customised that a bit so it opens a modal on click and then does the zoom.

This is my code for the carousel

<div id="Carousel" class="carousel multi-item-carousel slide small--hide">
  <div class="grid grid--no-gutters">
<div class="carousel-inner">
    {% assign variable = 0 %}
      {% for image in product.images %}
   <div class="item">
   <div class="grid__item one-half carousel-padding">
       <style>
  .imgModal_{{ image.id }} {
    width: 100%;
    margin: 0 auto;
    display: none;
  }
   </style>
           <img class="{{ image.id }}_test" src="{{ image.src | img_url: 'master' }}" alt="{{ image.alt | escape }}" class="product-zoom"/>
           <div class="imgModal_{{ image.id }} imgmodal">
             <div class="img-zoom-container">
               <span class="close"></span>
             <img src="{{ image.src | img_url: 'master'  }}" alt="{{ image.alt | escape }}" class="image-zoom">
             <script>
               ;(function(window, $, undefined) {
                 $('.{{ image.id }}_test').on('click', function(){
                  $(this).next('.imgModal_{{ image.id }}').css('display', 'block');
                });

                $('.imgModal_{{ image.id }}').click(function(){
                  $('.imgModal_{{ image.id }}').css('display', 'none');
                });
              })(window, jQuery);
             </script>
           </div>
            </div>
   </div>
 </div>
     {% endfor %}
</div>
<a data-slide="prev" href="#Carousel" class="left carousel-control">{% include 'carousel-left'%}</a>
    <a data-slide="next" href="#Carousel" class="right carousel-control">{% include 'carousel-right'%}</a>
</div>
</div>

And the JS for the multi item carousel:

<script>
$( document ).ready(function() {
$(".carousel-inner div:first").addClass("active");
});
// Instantiate the Bootstrap carousel
$('.multi-item-carousel').carousel({
  interval: false
});

// for every slide in carousel, copy the next slide's item in the slide.
// Do the same for the next, next item.
$('.multi-item-carousel .item').each(function(){
  var next = $(this).next();
  if (!next.length) {
    next = $(this).siblings(':first');
  }
  next.children(':first-child').clone().appendTo($(this));

});
</script>

My problem now is that when it clones the images for the mutli item carousel the click event for the modal isn't working on the cloned item. I originally had the {{ image.id }}_test set as IDs so thought that might be the issue but after changing it to a class instead it's still not working.

Any ideas on how to fix this?

Answer 1

I've actually just fixed it myself so in case it helps anybody the issue was that the click event got lost in the clone so just had to add

next.children(':first-child').clone(true,true).appendTo($(this));

to my clone function.