Jquery 未在移动设备上切换的图像

我有一个小小的jQuery，它只是切换一个图像并进行一些缩放

    jQuery(".image-list-image").on('click', function(){

                // this line fixes my issue
                jQuery('.product-zoom-container').trigger('zoom.destroy');


                var org = jQuery('#main-image').attr("src");
                console.log('org = ' + org)

                var src = jQuery(this).attr("data-main-image-src");
                console.log('src = ' + src)
                if(src != org){
                    jQuery('#main-image').fadeOut(400, function(){
                        jQuery("#main-image").attr("src", src);
                    }).fadeIn(400);

                    jQuery('.product-zoom-container').zoom({
                        magnify: .25,
                        url: src,
                        on: 'grab',
                    });
                }
            });

它在桌面浏览器中工作得很好，但在移动设备上却不行。首先，你可以点击每个.image列表元素，它将很好地交换主图像。但是，如果您抓取主图像，tap on.image list元素将停止工作，容器将调整为src图像的大小，但实际图像不会改变

我不知道这里发生了什么，也不知道为什么它可以在台式机上工作&而不是移动设备上

有人能解释一下发生了什么[以及修复方法]

更新

---

添加了脚本链接，以在尝试对缩放容器执行任何进一步操作之前销毁该容器。似乎已经解决了我的问题

解决了我自己的问题-更新添加到问题：

// this line fixes my issue
jQuery('.product-zoom-container').trigger('zoom.destroy');

---

您可以发布一个JSFIDLE或HTML示例吗？