在加载和 Ajax 加载的内容上运行 JS 代码

请看这个 HTML 代码：

<div class="grid">
  <h2>First</h2>
  <p>Second</p>
</div>

<div class="grid">
  <h2>First</h2>
  <p>Second</p>
</div>

我可以使用以下代码更改页面加载时元素的顺序：

$('.grid').each(function(){
    var p = $(this).find('p'),
        h2= $(this).find('h2');
  h2.insertAfter(p);
});

但是 ajax 分页带来了更多内容，所以我将其包装在里面$(document).ajaxComplete(function(){

现在的问题是我的代码仅在加载 ajax 内容后运行，我希望我的代码在页面加载和 ajax 加载内容上运行。

谢谢您的帮助。

https://jsfiddle.net/j0fozshv/2/ https://jsfiddle.net/j0fozshv/2/

您可以将需要多次执行的操作提取到一个函数中：

function doMyStuff() {
  $('.grid').each(function(){
    var p = $(this).find('p'),
        h2= $(this).find('h2');
    h2.insertAfter(p);
  });

  // or do what you need. it's just an example
}

之后，只需在需要的地方使用您的函数即可。 文件准备好后：

$(function () {
     // ... 
     doMyStuff();
});

如果你有 AJAX 的东西，只需调用它来获取成功回调：

// just an example !
$(document).ajaxComplete(function() {
    doMyStuff();
});

再举一个 jQuery AJAX 的例子：

$.get( "/get_some_data", function( data ) {
  doMyStuff();
});

也许该函数接受一些参数（例如从服务器返回的数据）是有意义的：

function doMyStuff(data) {
  // do what you need
}

再说一遍 AJAX 的东西：

$.get( "/get_some_data", function( data ) {
  doMyStuff(data);
});