销毁lightGallery后重初始化异常：二次打开图片直接跳转而非弹窗

我之前也碰到过一模一样的情况，问题主要出在lightGallery的销毁方式不正确，再加上静态事件绑定失效，导致第二次打开时图片直接跳转而非唤起弹窗。下面是具体的分析和修复方案：

问题根源拆解 #

• 错误的销毁逻辑：你用$('#tempPictures').lightGallery({destroy: true});尝试销毁实例，但这并不是lightGallery官方推荐的销毁方式，这种写法无法彻底清除已绑定的事件和实例缓存。
• 静态事件绑定失效：页面初始化时绑定的$("#tempPictures > a:first > img").click()事件，在你清空#tempPictures的HTML后，新插入的图片元素不会继承这个绑定，点击时就会触发默认的跳转行为。
• 初始化判断的冗余干扰：虽然你设置了$galleryLoaded标记，但如果旧实例销毁不彻底，残留的状态会干扰重新初始化的流程。

修复后的完整代码 #

// 确保变量在合适的作用域内（比如全局或包裹在闭包中）
let $galleryLoaded = false;
const $token = $('meta[name="csrf-token"]').attr('content'); // 按你的实际场景获取token
const $inmateReplyAttachmentsRoute = '/your-actual-route'; // 替换为你的真实接口地址

function getReplyImages(id) {
    const $formData = { "_token": $token, "inmate_reply_id": id };
    ajaxStartStop();
    $.ajax({
        url: $inmateReplyAttachmentsRoute,
        type: 'POST',
        data: $formData,
        success: function (data) {
            let html = '';
            Object.keys(data).forEach(function (key) {
                html += `<a href="${data[key].file}">`;
                html += `<img src="${data[key].thumbnail}" />`; // 修正原代码里的"thumnail"拼写错误
                html += `</a>`;
            });
            $('#tempPictures').html(html);
            
            // 先销毁旧实例（如果存在）
            if ($('#tempPictures').data('lightGallery')) {
                $('#tempPictures').data('lightGallery').destroy(true);
            }
            
            // 重新初始化lightGallery
            $('#tempPictures').lightGallery({thumbnail: true});
            $galleryLoaded = true;
            
            // 触发第一张图的点击唤起画廊
            $('#tempPictures > a:first > img').trigger('click');
        },
        error: function ($error) {
            notificationMsg($error, 'error'); // 修正原代码里的参数缺失引号问题
        }
    });
}

$(function () {
    // 用事件委托绑定点击事件，确保动态生成的图片也能生效
    $('#tempPictures').on('click', 'a > img', function (e) {
        e.preventDefault();
        return false;
    });
});

// 监听画廊关闭完成事件
$('#tempPictures').on('onCloseAfter.lg', function(event, index, fromTouch, fromThumb){
    // 彻底销毁实例
    if ($(this).data('lightGallery')) {
        $(this).data('lightGallery').destroy(true);
    }
    $(this).html('');
    $galleryLoaded = false;
});

核心修复点说明 #

1. 正确销毁实例：通过$('#tempPictures').data('lightGallery')获取已初始化的实例，调用destroy(true)彻底清除所有绑定的事件和DOM残留，这是lightGallery官方推荐的销毁方式。
2. 事件委托替代静态绑定：把点击事件绑定到父元素#tempPictures上，用on('click', 'a > img', ...)的形式，确保后续动态生成的图片元素也能继承阻止跳转的逻辑。
3. 强制重新初始化：去掉原来的if(!$galleryLoaded)判断，每次获取数据后先销毁旧实例再初始化，避免残留状态干扰。
4. 细节修正：顺手修正了原代码里的拼写错误（thumnail→thumbnail）和参数格式问题，避免额外的潜在bug。

这样修改后，第二次打开画廊时就能正常唤起lightGallery弹窗，不会再出现图片直接跳转的问题了。

内容的提问来源于stack exchange，提问作者Ali Zia