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文档准备就绪时运行。第一个块开始.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
    });
});

Answer 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', // ...

Answer 3

你也可以使用bootstrap加载按钮来触发.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;
  });

.load之后调用函数（Jquery）

3 个答案: