通过.ajaxComplete传递变量

Question

我在很多地方将静态 div 与带有可编辑字段的内容配对，以更新 drupal10 站点上的内容。使用 $(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 之后触发一个变量。我也尝试过 $(this) 的变体，但我相信 ajax 过程打破了焦点，所以它不起作用。我需要这个才能工作，所以只有与点击关联的集合中的刷新div才会重新加载。

我已经走到这一步了：

(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);

但是在第二种情况下，变量targetID不执行ajax过程。我也尝试过将变量放在 .ajaxComplete 之后，但它也显示为空白。

我希望我需要以某种方式通过 .ajaxComplete 函数传递变量。我错过了什么？

Answer 1

我看到您面临的问题是 ajaxComplete 函数内的 targetID 变量的范围问题。

  $(document).ready(function () {
    $('.container form .form-submit').click(function () {
      // Get the target ID associated with the clicked element
      var targetID = $(this).closest('.container').data('id');
      // Store the targetID as a data attribute on the container for later use
      $(this).closest('.container').data('targetID', targetID);
    });

    // 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) {
        // Retrieve the targetID from the clicked element's container
        var targetID = $('.container').data('targetID');
        if (targetID) {
          // Use the retrieved targetID to select the correct elements
          $('.editfield' + targetID + ' .refreshdiv').load(location.href + ' .refreshdiv');
        }
      }
    });
  });
})(jQuery);