.load (Jquery) 后调用函数

Posted 2023-05-09

【中文标题】.load (Jquery) 后调用函数

【英文标题】：Calling function after .load (Jquery)

【发布时间】：2021-09-07 07:11:09

【问题描述】：

在 .load 之后调用函数有点困难：

$(function()
    $('a.pageFetcher').click(function()
        $('#main').load($(this).attr('rel'));
    );
);

页面加载，但功能不触发：

$(function()
    var $container = $('#container');
    $container.imagesLoaded(function()
        $container.masonry(
            itemSelector: '.box',
    );
);
$container.infinitescroll(
    navSelector  : '#page-nav',
    nextSelector : '#page-nav a',
    itemSelector : '.box',
    loading: 
        finishedMsg: 'Nothing else to load.',
        img: 'http://i.imgur.com/6RMhx.gif'
    
,
function( newElements ) 
    $.superbox.settings = 
        closeTxt: "Close this",
        loadTxt: "Loading your selection",
        nextTxt: "Next item",
        prevTxt: "Previous item"
    ;
    $.superbox();
    var $newElems = $( newElements ).css( opacity: 0 );
    $newElems.imagesLoaded(function()
        $newElems.animate( opacity: 1 );
        $container.masonry( 'appended', $newElems, true ); 
    );

);
);

我尝试将它们结合起来，以便在 .load 之后调用第二个函数（在此站点上进行一些搜索并查看给定的答案/示例之后），但似乎没有任何工作正常。

建议？

【问题讨论】：

正确缩进的代码不仅有助于您的可读性和故障排除，还有助于将来可能会看到它的任何人。

【参考方案1】：

要在.load() 完成后运行一些代码，您需要将代码放入.load() 的完成函数中。加载操作是异步的，因此 load 函数开始加载内容，然后立即返回并且您的 JS 执行继续（在加载完成之前）。因此，如果您尝试对新加载的内容进行操作，它还不会出现。

当您的代码现在编写时，您有两个代码块，它们都在原始 html 文档准备好时运行。第一个块启动.load() 操作。第二个操作预计 .load() 已经完成，但它尚未完成，因此来自 .load() 操作的内容尚不可用。

这就是.load() 将完成函数作为参数的原因。这是加载完成时将调用的函数。请参阅the relevant jQuery .load() doc 了解更多信息。这是您的代码使用完成函数后的样子。

$(function()
    $('a.pageFetcher').click(function()
        $('#main').load($(this).attr('rel'), function() 
            // put the code here that you want to run when the .load() 
            // has completed and the content is available
            // Or, you can call a function from here
        );
        // the .load() operation has not completed here yet
        // it has just been started
    );
);

【讨论】：

感谢您快速准确的回答！我还发现了我是如何以错误的方式处理它的，这也很有帮助。

【参考方案2】：

您的第一个参考点应该始终是jQuery API，这是API page on .load() 告诉您有关加载函数采用的参数的内容：

.load(handler(eventObject))

.load( [eventData], handler(eventObject) )

在这种情况下，您将 $(this).attr('rel') 作为 eventData 传递，因此您在 之后添加事件处理程序：

$('#main').load($(this).attr('rel'), onNewMainContent);

在您的第二个代码块中，您告诉 jQuery 在您的 body 加载时执行它，而不是在您将更多内容加载到您的网站时执行它。您需要专门执行它，因此将该函数的开头更改为：

function onNewMainContent   // new
  var $container = $('#container');
  $container.imagesLoaded(function()
    $container.masonry(
      itemSelector: '.box',
  // ...

【参考方案3】：

您也可以使用引导加载按钮来触发.load()和.load()之后的函数

HTML

<button type="button" class="btn btn-primary btn-lg" id="refresh" data-loading-text="<i class='fa fa-spinner fa-spin '></i>Processing">Reload Emails</button>

JQUERY

 $("#refresh").click(function() 

    var $this = $(this);
    $this.button('loading');

    $("#container").load("/showemails.aspx?page=1 #container", function() 
         $("#refresh").button('reset');
      );

     return false;
  );