FancyBox 3的data-caption内自定义函数点击提示未定义问题求助

问题原因 #

• 先排查拼写笔误：控制台报错提示doSmething is not defined，而你定义的函数名为doSomething，先确认是否是拼写错误导致的异常。
• 排除拼写问题后，核心原因就是自定义函数加载时机滞后：
  FancyBox 3仅在用户点击触发弹窗时，才会动态解析data-caption属性里的HTML内容并插入到弹窗DOM中。如果你的doSomething函数定义的执行时机晚于FancyBox渲染caption的时机，内联onclick事件触发时就会找不到对应函数。
  而页面中原生的按钮是在DOM加载阶段就完成解析的，只要函数加载完成后点击就可以正常调用，因此不会出现报错。

修复方案 #

方案1：提前定义全局函数 #

将函数定义放到页面<head>标签中，或者直接挂载到window全局对象上，确保FancyBox渲染时函数已经存在：

window.doSomething = function(data1, data2) {
    alert('Function works: '+data1+ ' and ' +data2 );
    // 此处编写你的业务逻辑
}

方案2：使用事件委托绑定事件（更推荐） #

避免在HTML里写内联onclick，降低代码耦合度，也不需要依赖全局函数：

1. 调整data-caption里的按钮代码，用自定义属性存储参数：

<a href="图片链接" data-fancybox="gallery" data-caption='<button type="submit" class="btn btn-primary" data-param1="data1" data-param2="data2">Submit</button>'>
  <img src="缩略图链接" alt="" />
</a>

2. 用事件委托绑定点击事件：

$(document).on('click', '.fancybox-caption .btn-primary', function() {
    const param1 = $(this).data('param1');
    const param2 = $(this).data('param2');
    alert('Function works: '+param1+ ' and ' +param2 );
    // 此处编写你的业务逻辑
})

内容的提问来源于stack exchange，提问作者K. B.