为Drupal行为添加once()和each()后jQuery代码失效排查

核心错误点 #

1. Once方法调用方式错误
   若你使用的是Drupal 7，jQuery对象的.once()方法不存在，必须使用全局$.once()函数；即使是Drupal 8+，也需确保在context范围内正确查找元素，否则会直接中断代码执行。
2. 全局选择器导致逻辑混乱
   原代码中所有内容选择器未限定在当前折叠容器内，会操作页面中所有匹配元素，而非目标容器的内容。
3. 事件绑定范围错误
   点击事件绑定到全局.tab-content元素，多容器场景下会触发错误逻辑。

修正后的代码 #

适用于Drupal 8/9/10 #

(function($, Drupal) {
  Drupal.behaviors.collapsedPricing = {
    attach: function attach(context) {
      $(context).find(".pricing .pricing-tabs-contents")
        .once("collapsedPricing")
        .each(function() {
          const $container = $(this);
          const $content = $container.find(".text, .blue-table-container");
          const $tabTrigger = $container.find(".tab-content");

          // 初始屏幕宽度适配
          if (window.innerWidth < 1001) {
            $content.hide();
            $container.addClass("collapsed");
          }

          // 绑定折叠切换事件
          $tabTrigger.on("click", function() {
            $container.hasClass("collapsed") ? $content.show("slow") : $content.hide("slow");
            $container.toggleClass("collapsed");
          });
        });
    }
  };
})(jQuery, Drupal);

适用于Drupal 7 #

(function($, Drupal) {
  Drupal.behaviors.collapsedPricing = {
    attach: function attach(context) {
      // Drupal 7使用全局$.once函数
      $.once("collapsedPricing", ".pricing .pricing-tabs-contents", context).each(function() {
        const $container = $(this);
        const $content = $container.find(".text, .blue-table-container");
        const $tabTrigger = $container.find(".tab-content");

        if (window.innerWidth < 1001) {
          $content.hide();
          $container.addClass("collapsed");
        }

        $tabTrigger.on("click", function() {
          $container.hasClass("collapsed") ? $content.show("slow") : $content.hide("slow");
          $container.toggleClass("collapsed");
        });
      });
    }
  };
})(jQuery, Drupal);

关键修正说明 #

• 限定选择器范围：使用$container.find()替代全局选择器，确保只操作当前折叠容器内的元素。
• 正确使用Once：Drupal 8+用$(context).find(...).once()，Drupal 7用$.once()全局函数，避免因方法不存在导致代码失效。
• 事件绑定优化：仅绑定当前容器内的.tab-content元素，避免多容器干扰。

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