Fancybox无法正常执行：项目代码无效但控制台运行正常

以下是几种常见原因及解决办法：

• DOM未就绪就执行代码
  项目中代码可能在带[data-fancybox]属性的元素还没加载完成时就运行了，而控制台是页面完全加载后手动执行，自然能找到目标元素。
  解决：把初始化代码放到DOM就绪回调里：

  $(document).ready(function() {
    $('[data-fancybox]').fancybox({
      infobar: false,
      buttons : ["zoom", "slideShow", "thumbs", "close"],
      wheel : false,
      transitionEffect: "slide",
      toolbar: true,
      clickContent: false,
      afterLoad: function() {
        if (!$('.fancybox-button--play').hasClass("fancybox-button--pause")) {
          $('.fancybox-button--play').trigger('click');
        }
      }
    });
  });
  

  或者将脚本放在页面</body>标签前，确保DOM已加载。

• 依赖加载顺序错误
  项目中可能先执行了你的初始化代码，后加载jQuery或Fancybox库，导致$或fancybox方法未定义。控制台运行时库已加载完成，所以能正常执行。
  解决：按顺序引入资源：先引入jQuery，再引入Fancybox的JS文件，最后加载你的初始化脚本。

• $作用域冲突
  项目中可能存在其他库（如Prototype、Zepto）修改了$的指向，导致$不是jQuery的别名。控制台无其他干扰，所以正常。
  解决：改用jQuery全称，或用IIFE包裹代码来保留$的jQuery别名：

  jQuery(function($) {
    $('[data-fancybox]').fancybox({/* 你的配置项 */});
  });
  

• 目标元素动态生成
  如果[data-fancybox]元素是通过AJAX或动态渲染生成的，初始化代码执行时这些元素还不存在，控制台运行时元素已生成，所以能生效。
  解决：在动态元素生成完成后，重新调用Fancybox初始化代码。

• 项目中存在其他报错
  项目运行时可能有其他代码报错，导致后续的Fancybox初始化被中断。控制台单独运行时无其他错误，所以正常执行。
  解决：打开浏览器开发者工具的Console面板，查看项目运行时的报错信息，先修复这些错误。

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