ajax成功后绑定的jQuery Fancybox点击事件打开画廊不显示图片

问题根源 #

• 图片对象字段不匹配（直接导致图片加载失败）
  从你使用的helpers配置可以判断你用的是 Fancybox 2.x 版本，这个版本要求传入的图片数组中，每个图片项的地址必须存在href字段内。但你从后端接收的图片对象，地址字段是自定义的（比如src/url），不是Fancybox识别的href，导致它读不到地址，最终把渲染的img.src置空，画廊内容为空。
• 事件绑定逻辑不规范（非本次报错原因，但会引发后续异常）
  你把click事件绑定写在ajax成功回调里，多次触发ajax更新内容时会重复绑定同一个元素的事件，同时后续动态生成的.poi-gallery元素也无法触发监听。

具体修复步骤 #

1. 适配Fancybox的参数结构
   解析完data属性里的gallery数组后，先把图片字段映射成Fancybox要求的格式，再调用打开方法：

// 绑定事件的回调逻辑
let gallery = $(this).attr('data-gallery');
gallery = JSON.parse(gallery);
// 字段映射：把你的实际字段对应到Fancybox要求的字段
const fancyboxItems = gallery.map(item => ({
  href: item.src, // 把item.src替换成你实际存图片地址的字段名
  type: 'image', // 显式指定类型为图片，避免识别错误
  title: item.title || item.caption || '' // 标题字段按你的实际结构调整
}))
// 传入映射后的数组再打开
$.fancybox.open(fancyboxItems, {
  helpers : {
    thumbs : {
      width: 75,
      height: 50
    }
  }
});

2. 改用事件委托模式绑定监听
   把事件绑定从ajax回调内部移到全局初始化代码中，避免重复绑定，同时支持动态生成的元素：

// 全局初始化时绑定一次即可，不需要放在ajax成功回调里
$(document).on('click', '.poi-gallery', function() {
  // 上述的回调逻辑
});

3. 统一data属性的读写方式
   给元素赋值data-gallery时用$('.poi-gallery').attr('data-gallery', poi_images)，读取时也用attr('data-gallery')，不要混用jQuery的.data()方法：.data()会自动解析JSON且存在缓存机制，容易读取到旧值或者解析异常。

验证方式：修改后先打印映射完成的fancyboxItems，确认每个项的href字段都是正确的可访问图片地址，再测试画廊打开效果。

内容的提问来源于stack exchange，提问作者Marc R.