Question

我使用的是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请求完成之后。

Answer 1

如果你需要在页面生命周期的多个点调用单个函数（如上所述，在页面加载和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代码中的逻辑。

Answer 2

几个小时以来，我一直在寻找解决这个完全相同的问题的方法。对我有用的是

$(document).ajaxComplete()

我将代码放在这里，当Ajax完成并且div的内容完全重新加载时，我添加了我想要添加的样式。希望这对某人有帮助。从ajax成功调用该方法将不起作用。

Answer 3

试试这个：

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

希望这会有所帮助。

Answer 4

调用函数时，必须使用()之类的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内容都已加载。

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

4 个答案: