layui表格中图片点击放大需用事件委托绑定到.layui-table-body，选择器为td .table-img；点击时获取src或data-big构造layer.photos所需photos对象，避免重复绑定和默认行为干扰。
layui table 中图片点击放大：用事件委托绑定 td 内的 img
layui 表格渲染后，单元格里的 img 是动态插入的，直接写 onclick 或用 $("img").on("click") 都会失效。必须用事件委托，把监听挂到表格容器或 tbody 上。
常见错误是给 table 标签加 click 事件但没指定子元素选择器，或者在 render 回调里用 $("img") 重绑 —— 表格翻页、重载数据后就又丢了。
- 推荐绑定到
layui-table-body容器（它随表格内容更新而复用），选择器写td img或更精确的td .thumb-img（建议给图片加 class） - 不要在
done回调里反复调用$().on()，会造成重复绑定；统一在表格初始化完成后绑定一次即可 - 如果用了 Layui 的
lay-event自定义列，图片可放在templet里，但点击事件仍需委托，不能依赖lay-event（它只响应td或按钮级点击）
放大方案选型：用 layer.photos 最省事
layer.photos 原生支持从 DOM 节点提取图片并全屏浏览，比手写 lightbox 稳定，且兼容 Layui 的 CSS 环境。关键不是“怎么放大”，而是“怎么让 layer 正确识别当前点击的这张图”。
容易踩的坑：直接传 $(this) 给 layer.photos 会失败，因为它的 photos 参数需要一个带 data 数组的对象，不是单个 jQuery 对象。
- 最简做法：点击时收集当前
img的src，构造最小 photos 对象，start: 0即可 - 如果表格某列固定只有一张图，用
$(this).attr("src")就够；如果有多个图（如缩略图+原图），建议把原图地址存在data-big属性里：<img src="s.jpg" data-big="b.jpg"> - 注意
layer.photos默认会找父级.layer-photos-list，但你没这个结构——所以必须显式传data，不能依赖自动扫描
完整事件绑定代码示例
假设表格容器 id 是 demoTable，图片加了 class table-img：
<script>
// 表格渲染完后执行（比如在 table.render 的 done 回调里）
$('.layui-table-body').on('click', 'td .table-img', function(){
var src = $(this).data('big') || $(this).attr('src');
layer.photos({
photos: {
"title": "图片查看",
"id": 123,
"data": [{ "src": src }]
},
anim: 5
});
});
</script>
这里不用 $("#demoTable") 是因为 Layui 表格滚动时，tbody 会被虚拟滚动替换，而 .layui-table-body 是稳定容器；td .table-img 确保只响应单元格内带 class 的图，避免误触表头或其他位置。
移动端适配和性能注意点
在 iOS Safari 或微信内置浏览器里，图片点击可能触发长按保存菜单，干扰 layer 弹出。这不是 Layui 的问题，而是原生行为。
- 给图片加
style="user-select:none;-webkit-user-drag:none;"可抑制部分默认交互 - 如果表格行数多、图片多，别在
templet里塞高清图，用缩略图 +data-big指向原图，减少首屏加载压力 -
layer.photos在小屏幕下会自动适配，但如果你自定义了photos.data里的alt或pid，记得确保它们是字符串类型，否则 iOS 下可能报错中断
真正麻烦的从来不是“怎么让图放大”，而是“怎么让这张图在翻页、搜索、排序之后还能被准确点中”。委托目标、属性约定、初始化时机，三者缺一不可。
