Question

请参阅此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/

Answer 1

你可以制作一个类似下面的方法，然后调用两次，一次是在页面加载之后，一次是在ajax完成之后。

getsearchresults(searchquery)

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

对于该函数来说，采用一些args（例如从服务器返回的数据）可能是有意义的：

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

再次针对你的AJAX：

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

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

2 个答案: