Drupal10中jQuery once切换功能在Firefox生产环境失效问题

云上老周

2026-7-6

Drupal 10 jQuery once切换功能Firefox生产环境失效修复

问题概述

切换功能在Chrome、Edge及Firefox开发环境正常，但Firefox生产环境完全失效：点击链接无响应，控制台无报错日志。需求是通过data-id变量复用代码实现多实例切换，避免为每个链接单独编写函数。当前使用jQuery 3.7.0版本。

可能原因

Firefox生产环境缓存未更新，加载了旧版本代码
once库的上下文处理在生产环境存在差异，导致事件未正确绑定
jQuery data()方法的缓存机制引发data-id解析异常
链接点击触发默认跳转行为，中断toggle逻辑
选择器拼接后未匹配到目标元素，或context限制导致元素无法被选中

修复方案

1. 处理缓存问题

在Drupal后台「配置 > 性能」中，临时禁用CSS/JS聚合，或在静态资源URL后添加版本号（如?v=1.0.1），强制Firefox加载最新代码。测试完成后再重新启用聚合。

2. 优化代码逻辑

调整事件绑定方式、data-id获取逻辑，添加默认行为阻止：

(function($, Drupal, once) {
  Drupal.behaviors.toggleLink = {
    attach: function(context) {
      // 用once标记元素，避免重复绑定事件
      const toggleLinks = once('toggleLink', '.togglelink', context);
      $(toggleLinks).on('click', function(event) {
        // 阻止链接默认跳转，确保toggle逻辑执行
        event.preventDefault();
        // 直接获取data-id属性，避免jQuery data缓存潜在问题
        const btnId = $(this).attr('data-id');
        // 定位目标元素，限定在当前context内
        const targetContent = $('.hidecontent' + btnId, context);
        // 验证元素存在后执行切换
        if (targetContent.length) {
          targetContent.toggle(400);
        }
      });
    }
  };
}(jQuery, Drupal, once));