我试图在我的codeigniter系统中集成jQuery插件imgZoomAndRotate。当我按照链接中提到的步骤1-4时，库对于静态图像工作得很好。但是当我试图调用js函数通过我的数据库加载图像时，图像被加载，但库在点击图像时不起作用。

静态图片案例

<div class="row row-5" id="images-modules">
   <div class="col-sm-2">
      <div class="img-thumbnail rounded"><span class="del-image" data-id="15">&times;</span><img src="<?php echo $equipment_images_path;?>6ff77345db350d4efd50f6573b72164c.jpeg" class="img-fluid"></div>
   </div>
   <div class="col-sm-2">
      <div class="img-thumbnail rounded"><span class="del-image" data-id="15">&times;</span><img src="<?php echo $equipment_images_path;?>bbf36b9be6c1f4c40399ec024603a010.JPG" class="img-fluid"></div>
   </div>
   <div class="col-sm-2">
      <div class="img-thumbnail rounded"><span class="del-image" data-id="15">&times;</span><img src="<?php echo $equipment_images_path;?>9e4f68c3fd043978295cc359caf2b784.jpeg" class="img-fluid"></div>
   </div>
</div>
</div>

动态图片案例

<div class="row row-5" id="images-modules">
</div>

JS代码

<script src="{theme_url}js/plupload/plupload.full.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-mousewheel/3.1.13/jquery.mousewheel.min.js"></script>
<script src="{theme_url}js/ezoom/jquery.drag.js"></script>
<script src="{theme_url}js/ezoom/imgZoomAndRotate.js" ></script>
<script>
   jQuery(document).ready(function() {  
   
          function loadImages(){
           $.getJSON('<?php echo base_url($action_url); ?>?load_images=true', function (data) {
               $('#images-modules').html('');
               if (data.length>0){
   
                   $(data).each(function(o,i){
                       
                       $('#images-modules').append('<div class="col-sm-2">'+i.first_name+'<div class="img-thumbnail rounded"><span class="del-image" data-id="'+i.ID+'">&times;</span><img src="<?php echo $equipment_images_path;?>'+i.thumb_filename+'" class="img-fluid"></div></div>');
                   });
               }else{
                   $('#images-modules').html('<div class="alert alert-info">No images associated with this inventory.</div>')
               }
           });
       }
       loadImages();
   
          $('.img-fluid').imgZoomAndRotate({
           'loop':true
         }); 
   });
</script>

1.为了用静态图像测试库，我只注解了函数loadImages()，库工作得很好。
1.为了测试动态图像库，我只是删除了div <div class="row row-5" id="images-modules">的所有内容，这些内容将在调用document.ready上的函数loadImages()时加载。在第二种情况下，图像加载到images-modules div中并显示在容器中，但当我单击图像时库不工作。
附注：
控制台也没有JS错误。所有的JS文件都加载得很好，没有任何路径问题
提前表示感谢

EDITSimgindex= 0，1，2在动态加载图片的情况下没有被附加到img（库在静态图片的情况下自动添加此属性）。我甚至尝试在加载图片时动态地将imgindex标签与图片附加，但仍然不起作用