baguetteBox灯箱在Knockout.js foreach绑定中无法正常工作

我用baguetteBox实现图片预览灯箱功能时遇到问题：点击Knockout.js foreach绑定生成的图片，页面会直接跳转到图片文件地址，而不是弹出灯箱；但foreach绑定外的图片能正常触发灯箱。

问题代码 #

foreach绑定内的视图代码：

<section class="gallery-block cards-gallery">
    <div class="row" data-bind="foreach: PatrolGalleryList">
        <div class="col-md-4 col-lg-2">
             <div class="card border-0 transform-on-hover">
                  <a class="lightbox" data-bind="attr:{href: ImgUrl}">
                  <img data-bind="attr:{src: ImgUrl}" alt="Card Image" class="card-img-top">
                  </a>
             </div>
        </div>
    </div>
</section>

正常工作的foreach外代码：

<div class="row">
    <div class="col-md-4 col-lg-2">
         <div class="card border-0 transform-on-hover">
              <a class="lightbox" data-bind="attr:{href: SingleImgUrl}">
              <img data-bind="attr:{src: SingleImgUrl}" alt="Card Image" class="card-img-top">
              </a>
         </div>
    </div>
</div>

当前JS初始化代码：

<script src="~/Scripts/baguetteBox.min.js" type="text/javascript"></script>
<script>
$(document).ready(function () {
        baguetteBox.run('.cards-gallery', { animation: 'slideIn' });
 });
</script>

问题原因 #

初始化时机不匹配：baguetteBox在document.ready时完成初始化，但此时Knockout的foreach绑定还未完成动态DOM渲染，那些通过foreach生成的<a class="lightbox">元素还不存在，导致baguetteBox无法给它们绑定阻止默认跳转、触发灯箱的事件，点击时自然执行a标签的默认跳转行为。

解决方案 #

方案一：数据加载完成后重新初始化baguetteBox

如果PatrolGalleryList是异步加载的数据，在数据绑定完成后重新调用初始化方法：

// 示例：异步加载数据并绑定后初始化
$.get('/api/patrol-gallery', function(data) {
    viewModel.PatrolGalleryList(data);
    // 确保DOM渲染完成后重新初始化
    baguetteBox.run('.cards-gallery', { animation: 'slideIn' });
});

方案二：用Knockout自定义绑定监听渲染完成

创建自定义绑定，在foreach渲染完成后自动触发baguetteBox初始化：

ko.bindingHandlers.initGallery = {
    update: function(element, valueAccessor) {
        // 监听绑定数组的变化
        ko.unwrap(valueAccessor());
        // 延迟执行确保DOM已更新
        setTimeout(() => {
            baguetteBox.run('.cards-gallery', { animation: 'slideIn' });
        }, 0);
    }
};

在视图中添加该绑定：

<section class="gallery-block cards-gallery" data-bind="initGallery: PatrolGalleryList">
    <div class="row" data-bind="foreach: PatrolGalleryList">
        <!-- 原有内容不变 -->
    </div>
</section>

方案三：事件委托拦截点击并手动触发灯箱

通过事件委托拦截点击事件，阻止默认跳转后手动调用baguetteBox的打开方法：

$(document).on('click', '.cards-gallery .lightbox', function(e) {
    e.preventDefault(); // 阻止默认跳转
    // 获取当前图片在列表中的索引
    const links = Array.from(document.querySelectorAll('.cards-gallery .lightbox'));
    const currentIndex = links.indexOf(this);
    // 初始化并打开对应索引的灯箱
    baguetteBox.run('.cards-gallery', { animation: 'slideIn' }).open(currentIndex);
});

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