Divi Builder自定义弹窗草稿模式正常 发布后按钮无法触发jQuery问题

问题核心原因 #

Divi 发布后默认开启性能优化策略，包括动态异步渲染DOM、合并压缩JS、延迟加载脚本，你的原有代码存在多处Divi适配问题，导致发布后绑定失效：

1. 重复引入jQuery，和Divi内置的jQuery实例冲突，导致JS执行异常
2. 仅用document.ready控制执行时机，Divi动态生成的元素还未挂载到DOM就执行了弹窗初始化，事件绑定无效
3. 缺少和触发类后缀匹配的弹窗内容容器，JS无法找到目标弹窗元素
4. 未兼容Divi异步加载场景的触发逻辑

修复方案 #

1. 替换JS初始化逻辑

改用Divi专属的元素加载完成事件监听，兼容动态渲染和异步加载场景：

jQuery(document).on('et_pb_after_init_modules ajaxComplete', function() {
  const $ = jQuery;
  // 给弹窗内容添加默认隐藏类
  $('div:not(.et_mobile_menu) .lightbox-content, div:not(.et_mobile_menu) [class*="lightbox-content-"]').addClass("mfp-hide");
  
  // 通用弹窗触发绑定
  $("div:not(.et_mobile_menu) .lightbox-trigger").magnificPopup({
    items: {
      src: "div:not(.et_mobile_menu) .lightbox-content",
      type: "inline"
    },
    zIndex: 999999
  });
  
  // 带后缀的一对一弹窗绑定
  $('div:not(.et_mobile_menu) [class*="lightbox-trigger-"]').each(function() {
    const triggerClass = Array.from(this.classList).find(cls => cls.startsWith("lightbox-trigger-"));
    if (!triggerClass) return;
    const targetContentClass = ".lightbox-content-" + triggerClass.split("lightbox-trigger-")[1];
    // 校验目标内容是否存在，避免控制台报错
    if ($(targetContentClass).length === 0) return;
    $(this).magnificPopup({
      items: {
        src: targetContentClass,
        type: "inline"
      },
      zIndex: 999999
    });
  });

  // 移动端兼容处理
  $(document).on('touchstart', function() {
    $(".mfp-wrap").attr("id", "et-boc");
  });
  
  // 插入自定义遮罩层
  $('[class*="lightbox-content"]').prepend('<div class="lightbox-overlay"></div>');
});

2. 修正HTML结构

移除重复的jQuery引入，补充和触发类后缀匹配的弹窗内容容器：

<!-- 仅保留magnific-popup的依赖，删除你自行引入的jQuery代码，使用Divi内置jQuery -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/magnific-popup.js/1.1.0/jquery.magnific-popup.min.js" integrity="sha512-IsNh5E3eYy3tr/JiX2Yx4vsCujtkhwl7SLqgnwLNgf04Hrt9BT9SXlLlZlWx+OK4ndzAoALhsMNcCmkggjZB1w==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/magnific-popup.js/1.1.0/magnific-popup.css" integrity="sha512-WEQNv9d3+sqyHjrqUZobDhFARZDko2wpWdfcpv44lsypsSuMO0kHGd3MQ8rrsBn/Qa39VojphdU6CMkpJUmDVw==" crossorigin="anonymous" referrerpolicy="no-referrer" />

<!-- 触发按钮，类后缀为popup -->
<div class="lightbox-trigger-popup wrapper"><a href="#" class="lightbox-trigger-popup header-btn">Play</a></div>

<!-- 必须补充对应后缀的弹窗内容容器，类后缀和触发按钮保持一致为popup -->
<div class="lightbox-content-popup">
  此处填写你的弹窗展示内容
</div>

3. 额外配置检查

• 进入Divi主题选项 > 性能设置，若开启了「JavaScript延迟加载」、「JavaScript文件合并」，将上述magnific-popup的JS、CSS资源地址添加到排除列表，避免加载顺序错误
• 确认触发按钮的链接设置为#，未开启新窗口跳转属性
• 不要手动给弹窗内容容器设置display:none属性，脚本会自动添加mfp-hide类控制显隐

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