Drupal 10中如何在.ajaxComplete中传递变量实现局部刷新

在Drupal 10站点中，我将静态内容div与可编辑字段配对以更新内容，使用$(div).load(url)已实现单个实例的刷新功能，代码如下：

(function ($) {
  $(document).ready(function () {
        $('.container form .form-submit').click(function () {
        });
        $(document).ajaxComplete(function (event, xhr, settings) {
        if (typeof settings !== 'undefined' && settings.extraData && settings.extraData._drupal_ajax) {
             $('.targetdiv').load(location.href + " .targetdiv > *");
         }   
       }
     );
  });
})(jQuery);

但在存在多实例的页面中，我无法将变量传递到.ajaxComplete中，仅让点击关联的refreshdiv重载。尝试使用$(this)因Ajax流程丢失焦点而无效，当前编写的代码中targetID无法在Ajax流程中传递：

(function($){
  $(document).ready(function() {
        var targetID = $('.container').data('id');
        $(document).on('click', '.editfield' + targetID + ' form .form-submit', function(){
        });
        // Listening for AJAX completion after button click
        $(document).ajaxComplete(function (event, xhr, settings) {
        console.log('ajax complete');
        // Check if the AJAX request is from Drupal
        if (typeof settings !== 'undefined' && settings.extraData && settings.extraData._drupal_ajax) {
            $(".container .refreshdiv").addClass(targetID);
            $('.targetID').load(location.href + " .targetID > *");
         }
     });
  });
})(jQuery);

我需要将变量传递到.ajaxComplete函数中，请问遗漏了什么？

你的核心问题是全局监听的ajaxComplete无法获取点击提交按钮时的上下文信息，加上初始获取targetID的方式只适配单实例，导致多场景下失效。以下是修正思路和代码：

• 不要提前固定targetID，点击时记录当前关联的容器ID：放弃一开始就获取单个targetID，改为在点击提交按钮时，通过DOM层级找到当前按钮所属的容器ID，并存到全局可访问的位置。
• 修正选择器错误：原代码中$('.targetID')是固定选择器，需改为动态拼接的类名；给refreshdiv加类的逻辑多余，直接通过容器ID定位即可。
• 适配多实例绑定：不需要硬编码.editfield+ID的选择器，通过DOM层级关系自动适配所有实例。

修改后的代码：

(function($){
  $(document).ready(function() {
        // 点击提交按钮时，记录当前关联的容器ID
        $(document).on('click', '.container form .form-submit', function(){
            // 通过DOM层级找到当前按钮所属的container，获取其data-id
            var currentTargetID = $(this).closest('.container').data('id');
            // 把ID存在document上，供ajaxComplete读取
            $(document).data('currentRefreshID', currentTargetID);
        });

        $(document).ajaxComplete(function (event, xhr, settings) {
            if (typeof settings !== 'undefined' && settings.extraData && settings.extraData._drupal_ajax) {
                // 读取之前存储的容器ID
                var targetID = $(document).data('currentRefreshID');
                if (targetID) {
                    // 只刷新对应ID的refreshdiv
                    $('.container[data-id="' + targetID + '"] .refreshdiv').load(location.href + ' .container[data-id="' + targetID + '"] .refreshdiv > *');
                    // 清空存储的ID，避免下次误触发
                    $(document).removeData('currentRefreshID');
                }
            }
        });
  });
})(jQuery);

关键说明 #

• 用closest('.container')从点击的按钮向上找到所属容器，自动适配所有实例，无需提前获取单个ID。
• 点击时把ID存在document的data中，ajaxComplete时读取这个值，实现上下文传递。
• 刷新完成后移除存储的ID，防止后续无关的AJAX请求错误触发刷新。

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