在.load之后调用函数（Jquery）

在.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之后调用第二个函数（在这个站点上进行了一些搜索并查看了给定的答案/示例之后），但似乎没有任何功能正常工作

---

建议？

要在

.load（）

完成后运行一些代码，您需要将代码放入

.load（）

的完成函数中。加载操作是异步的，因此加载函数开始加载内容，然后立即返回并继续执行JS（在加载完成之前）。因此，如果您试图对新加载的内容进行操作，它还不会出现

现在编写代码时，有两个代码块在原始HTML文档准备就绪时运行。第一个块启动

.load（）

操作。第二个操作要求已完成

.load（）

，但尚未完成，因此

.load（）

操作中的内容尚不可用

这就是为什么

.load（）

将完成函数作为参数。这是加载完成后将调用的函数。有关更多信息，请参阅。下面是使用完成函数时代码的外观

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

---

您的第一个参考点应该始终是，以下是关于load函数采用的参数的说明：

.load（处理程序（eventObject））

.load（[eventData]，处理程序（eventObject））

在本例中，您将

$（this）.attr（'rel'）

作为eventData传递，因此您将在之后添加事件处理程序：

在第二段代码中，您告诉jQuery在身体加载时执行它，而不是在站点加载更多内容时执行。您需要具体执行它，因此将该函数的开头更改为：

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

---

还可以使用引导加载按钮触发.load（）和.load（）之后的函数

HTML

---

正确缩进的代码将不仅有助于您，而且有助于将来可能看到它的任何人的可读性和故障排除。感谢您快速准确的回答！我还发现我是如何以错误的方式进行的，这也是非常有帮助的。

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

<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>

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

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

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

     return false;
  });