jquery - .load 之后调用函数(Jquery)

Question

在 .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 之后调用第二个函数(在该网站上进行一些搜索并查看给定的答案/示例之后)，但似乎没有任何东西可以正常工作。

建议？

Answer 1

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

现在编写代码时，您有两个代码块，它们都会在原始 HTML 文档准备就绪时运行。第一个 block 启动 .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
    });
});