如何在ajax内容完全加载后调用函数，如$(window).load()或window.onload

How to call function after ajax content fully loaded like $(window).load() or window.onload?

本文关键字：window onload load 函数 ajax 加载 调用      更新时间：2023-09-26

我使用ajax，但有任何选项调用功能后ajax内容完全加载像$(window).load()或window.onload ?当我在新的页面一切工作正常与$(window).load()或window.onload功能，因为一些脚本工作后窗口完成加载。但问题是在ajax，当我点击链接和页面是动态加载内容从另一个页面，所以我们不需要$(window).load()或window.onload功能，但因为一些脚本只工作时，窗口加载或内容完全加载，所以如何调用功能后ajax内容完全加载如$(window).load()或window.onload ?

function windowload() {
      //Some functions works only after window load
 };

$(function() {
   $(window).on('load', windowload);
        $(document).on('click', '.pagination a', function(event) {
                        event.preventDefault();
                        var $this = this.href;
                        $.ajax({
                        url: '' + $this + '',
                        dataType: 'html',
                        success: function(html) {
                        var div = $('#style', $(html));
                        $('#style').html(div);
                        //call windowload but not working
                         windowload();
                        //Also tried this but not working
                        $('#style').on('load', function(){
                            windowload();
                           //Some functions work only after ajax content fully loaded 
                             });
                      });
               });
编辑:

我需要一个功能后，ajax内容完全加载而不是ajax请求完成。

我一直在试图找到解决这个完全相同的问题几个小时。对我有用的是

$(document).ajaxComplete()

我把我的代码在那里，当Ajax完成和div的内容完全重新加载，我添加了我想要添加的样式。希望这有助于有人。

如果需要在页面生命周期的多个点调用单个函数(如上所述，在页面加载和AJAX请求完成时都需要逻辑)，那么可以将所需的逻辑提取到其自己的函数中，以便根据需要调用。试试这个:

function htmlLoaded() {
    // Some functions work only after window load 
}
$(window).load(htmlLoaded); // called on page load
$(function() {
    $(document).on('click', '.pagination a', function(event) {
        event.preventDefault();
        $.ajax({
            url: this.href,
            dataType: 'html',
            success: function(html) {
                var styleHtml = $(html).find('#style');
                $('#style').html(styleHtml);
                htmlLoaded(); // called after the AJAX request completes successfully
            }); 
        });
    });
});

还请注意，我做了一些修改，以改善你的JS代码中的逻辑。

试试这个:

$("#Style").ready(function(){
   console.log('Style is fully loaded.');
   windowload();
});

当你调用一个函数时，你必须像windowload()一样使用()符号。以下是固定的，缩进良好的代码:(我删除了空引号，在这里无用)

function windowload() {
  //Some functions works only after window load
};
$(function() {
  $(window).on('load', windowload);
  $(document).on('click', '.pagination a', function(event) {
    event.preventDefault();
    var $this = this.href;
    $.ajax({
      url: $this, // Removed the empty quotes which are useless here
      dataType: 'html',
      success: function(html) {
        var div = $('#style', $(html));
        $('#style').html(div.html());
        $('#style').ready(windowload);
      }
    });
  });
});

通过添加一个新的script标签来运行windowload()功能，我们解决了这个问题。因为当这个脚本运行时，在这个标签之前放置的所有HTML内容都已加载。

相关文章：