如何让JS代码在页面加载与Ajax加载内容时均执行？

要让这段调整元素顺序的代码同时覆盖页面初始加载和Ajax加载完成后的场景，最简洁高效的方式是把核心逻辑封装成可复用的独立函数，然后分别在页面就绪事件和Ajax完成事件中调用它，既避免代码重复，又能完美适配两种场景。

具体实现代码 #

// 封装核心调整逻辑为可复用函数
function reorderGridElements() {
  $('.grid').each(function(){ 
    var p = $(this).find('p'), 
        h2= $(this).find('h2'); 
    h2.insertAfter(p); 
  });
}

// 页面初始DOM加载完成时，处理已有.grid元素
$(document).ready(function() {
  reorderGridElements();
});

// 每次Ajax请求完成后，处理新加载的.grid元素
$(document).ajaxComplete(function() {
  reorderGridElements();
});

额外优化建议（可选） #

如果担心重复处理已经调整过顺序的元素（比如初始元素在Ajax事件中被再次操作），可以给已处理的元素添加标记，避免重复执行：

function reorderGridElements() {
  // 只处理未添加过标记的.grid元素
  $('.grid:not(.has-reordered)').each(function(){ 
    var $grid = $(this);
    var p = $grid.find('p'), 
        h2= $grid.find('h2'); 
    h2.insertAfter(p);
    $grid.addClass('has-reordered'); // 添加标记，避免重复处理
  });
}

这样既能保证逻辑正确，还能提升性能，避免不必要的DOM操作。

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