Javascript jquery缩放和引导多项目旋转木马问题

我正在开发一个需要缩放功能的产品转盘。 旋转木马是引导式的，定制为每张幻灯片显示两个项目。 然后我将jQuery zoom用于产品缩放，但对其进行了一些定制，以便它在单击时打开一个模式，然后进行缩放

这是我的旋转木马代码

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

{%assign variable=0%}
{%用于product.images%中的图像}
.imgModal{{image.id}{
宽度：100%；
保证金：0自动；
显示：无；
}
;（函数（窗口，$，未定义）{
$（'.{image.id}}}{u test'）。在（'click'，function（）上{
$（this）.next（'.imgModal{{{image.id}}'）.css（'display'，'block'）；
});
$（'.imgModal{{image.id}}'）。单击（函数（）{
$（'.imgModal{{{image.id}}'）.css（'display'，'none'）；
});
})（窗口，jQuery）；
{%endfor%}

和多项目旋转木马的JS：

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

$（文档）.ready（函数（）{
$（“.carousel内部分区：第一”）.addClass（“活动”）；
});
//实例化引导转盘
$（'.multi-item carousel'）。carousel({
间隔：假
});
//对于旋转木马中的每张幻灯片，复制幻灯片中下一张幻灯片的项目。
//对下一个，下一个项目也这样做。
$（'.multi-item carousel.item'）。每个（函数（）{
var next=$（this.next（）；
如果（！next.length）{
next=$（this.sibbines（':first'）；
}
next.children（':first child'）.clone（）.appendTo（$（this））；
});

我现在的问题是，当它克隆多个项目转盘的图像时，模式的单击事件对克隆的项目不起作用。我最初将

{{image.id}}\u测试设置为id，因此认为这可能是问题所在，但在将其更改为类之后，它仍然不起作用

关于如何修复这个问题有什么想法吗？
实际上我自己刚刚修复了它，所以如果它对任何人都有帮助的话，问题是单击事件在克隆中丢失了，所以必须添加

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

我的克隆功能