WordPress插件开发中Fancybox激活时jQuery控制表单元素失效问题

AI 小北

2026-10-3

问题根因

Fancybox 3.x默认会克隆你指定的目标内容（也就是#hidden-content节点）到自己生成的弹窗容器（.fancybox-container）中渲染，原始的#hidden-content节点依然隐藏在页面原有位置。你直接通过ID选择#dia_semana、#day_week时，默认匹配到的是页面中原本隐藏的节点，而非弹窗内正在显示的克隆节点，因此修改样式不会在弹窗上生效。事件能正常触发是因为你用了document级的事件委托，克隆节点的change事件也会冒泡被捕获。

解决方案1：调整选择器，优先操作弹窗内的节点

修改你的change事件处理逻辑，优先选择fancybox弹窗容器内的目标元素即可：

jQuery(document).on('change', '#periodo', function(){
  const selectedVal = jQuery(this).val();
  // 优先选择弹窗内的元素，不存在则操作原节点
  const $diaSemana = jQuery('.fancybox-container #dia_semana').length ? jQuery('.fancybox-container #dia_semana') : jQuery('#dia_semana');
  const $dayWeek = jQuery('.fancybox-container #day_week').length ? jQuery('.fancybox-container #day_week') : jQuery('#day_week');

  if (selectedVal == 'dia') {
    $diaSemana.hide();
    $dayWeek.hide();
  } else {
    $diaSemana.show();
    $dayWeek.show();
  }
});

解决方案2：配置Fancybox不克隆节点，直接移动原节点渲染

在绑定Fancybox时添加move: true配置项，让Fancybox直接把原始内容移动到弹窗内渲染，而非克隆，此时页面内只会存在一份ID匹配的节点，原逻辑不需要修改也能生效：

// 先给按钮加属性
jQuery('a.woocommerce-button.button.form_btn_remember').attr('data-fancybox','').attr('data-src','#hidden-content');
// 初始化Fancybox时添加move配置
jQuery('[data-fancybox]').fancybox({
  move: true, // 核心配置：移动原节点而非克隆
  // 可按需添加其他配置，比如动画、点击行为等
  animationEffect: 'fade'
});