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

【问题标题】：Run JS code on load and on Ajax loaded content在加载和 Ajax 加载的内容上运行 JS 代码
【发布时间】：2018-05-13 10:49:36
【问题描述】：

请查看此 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/

【问题讨论】：

标签： javascript jquery ajax

【解决方案1】：

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

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

【讨论】：

谢谢。我正在寻找一种方法来阻止我执行该函数两次。

【解决方案2】：

您可以创建如下所示的方法并调用两次，一次在页面加载后，一次在 ajax 完成后。

// After page load 
insertDom();

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

$(document).ajaxComplete(function(){
    // Do your work
    insertDom();
});

【讨论】：

谢谢。我正在寻找一种方法来阻止我执行该函数两次。我想这也应该可行。