动态添加的类在jQuery .load中失效，如何正确实现重载？

你的问题核心在于：动态添加的testrefresh类只存在于前端DOM中，服务器返回的HTML页面里并没有这个类。当你用$('.testrefresh').load(location.href + " .testrefresh > *")时，第二个参数是在服务器返回的HTML中查找.testrefresh元素的子内容，但服务器端根本没输出这个类，自然找不到内容，导致加载为空。而固定类是后端硬编码的，服务器返回的HTML里有这个类，所以能正常匹配。

修复步骤 #

1. 修正点击事件的targetID获取逻辑

你原来的代码中，var targetID = $('.clickfield').data('id')只会取第一个.clickfield的data-id，如果有多个元素会失效。改成点击时取当前元素的data-id：

(function($){
  $(document).ready(function() {
    $('.clickfield').click(function() {
      // 取当前点击元素的data-id，确保每个clickfield对应正确的refreshdiv
      var targetID = $(this).data('id');
      var $refreshDiv = $('.refreshdiv' + targetID);
      if (!$refreshDiv.hasClass("testrefresh")) {
        $refreshDiv.addClass("testrefresh");
      }
    });
  });
})(jQuery);

2. 修改load的选择器，依赖后端存在的固定标识

不要用动态类作为服务器端的选择器，改用后端输出的固定标识（比如元素ID、固定类、data属性）。假设你的refreshdiv有后端生成的ID（比如refreshdiv123），修改ajaxComplete中的逻辑：

(function ($) {
  $(document).ready(function () {
    $(document).on('click', '.formsubmitaction form .form-submit', function(){});
    
    $(document).ajaxComplete(function (event, xhr, settings) {
      if (typeof settings !== 'undefined' && settings.extraData && settings.extraData._drupal_ajax) {
        // 遍历所有带testrefresh类的元素
        $('.testrefresh').each(function() {
          var $currentDiv = $(this);
          // 用元素的ID（后端生成的固定标识）去服务器返回的HTML中找对应内容
          var targetSelector = '#' + $currentDiv.attr('id');
          $currentDiv.load(location.href + targetSelector + " > *");
        });
      }
    });
  });
})(jQuery);

如果你的refreshdiv没有ID，也可以用后端硬编码的固定类（比如原来的refreshdiv类），或者自定义的data属性（比如后端给元素加data-target-id="XXX"），只需要把targetSelector换成对应的选择器即可，比如：

// 用固定类
var targetSelector = '.refreshdiv' + $currentDiv.data('target-id');

这样修改后，就能从服务器返回的HTML中正确找到对应元素的子内容，加载到动态添加了testrefresh类的div里。

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