.load (Jquery) 后调用函数
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/9899066/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Calling function after .load (Jquery)
提问by Matt
Having a little difficulty getting a function to call after a .load:
在 .load 之后调用函数有点困难：
$(function(){
$('a.pageFetcher').click(function(){
$('#main').load($(this).attr('rel'));
});
});
The page loads, but the functions don't fire:
页面加载，但功能不触发：
$(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 );
});
}
);
});
I've attempted to combine them so that the 2nd functions are called after .load (after doing some searching on this site and looking at given answers/examples) but nothing seems to work properly.
我试图将它们组合起来，以便在 .load 之后调用第二个函数（在此站点上进行一些搜索并查看给定的答案/示例之后），但似乎没有任何东西可以正常工作。
Suggestions?
建议？
回答by jfriend00
To run some code after a .load()finishes, you will need to put the code in a completion function for the .load(). The load operation is asynchronous so the load function starts the loading of the content and then immediately returns and your JS execution continues (before the load has completed). So, if you're trying to operate on the newly loaded content, it won't be there yet.
要在.load()完成后运行一些代码，您需要将代码放入.load(). 加载操作是异步的，因此加载函数开始加载内容，然后立即返回并且您的 JS 执行继续（在加载完成之前）。因此，如果您尝试对新加载的内容进行操作，则它尚未出现。
As your code is written now, you have two blocks of code that both run when the original HTML document is ready. The first block starts a .load()operation. The second operation expects the .load()to be done already, but it has not yet completed so the content from the .load()operation is not yet available.
现在编写代码时，您有两个代码块，它们都在原始 HTML 文档准备好时运行。第一个块开始一个.load()操作。第二个操作预计.load()已经完成，但尚未完成，因此.load()操作的内容尚不可用。
That's why .load()takes a completion function as an argument. That's a function that will be called when the load has completed. See the relevant jQuery .load()docfor more info. Here's what your code would look like with a completion function.
这就是为什么.load()将完成函数作为参数的原因。这是一个将在加载完成后调用的函数。有关.load()更多信息，请参阅相关的 jQuery文档。这是带有完成函数的代码的样子。
$(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
});
});
回答by Tom McKenzie
Your first point of reference should always be the jQuery API, here's what the API page on .load()tells you about the parameters the load function takes:
您的第一个参考点应该始终是jQuery API，这是.load() 上的API 页面告诉您有关加载函数采用的参数的内容：
.load( handler(eventObject) )
.load( [eventData], handler(eventObject) )
.load( handler(eventObject) )
.load( [eventData], handler(eventObject) )
In this case, you're passing $(this).attr('rel')as the eventData, so you add your event handler afterthat:
在这种情况下，您将$(this).attr('rel')作为 eventData传递，因此在此之后添加您的事件处理程序：
$('#main').load($(this).attr('rel'), onNewMainContent);
In your second block of code, you're telling jQuery to execute it when your bodyloads, not when you load more into your site. You need to execute it specifically, so change the start of that function to:
在你的第二个代码块中，你告诉 jQuery 在你的身体加载时执行它，而不是当你加载更多到你的网站时。您需要专门执行它，因此将该函数的开头更改为：
function onNewMainContent { // new
var $container = $('#container');
$container.imagesLoaded(function(){
$container.masonry({
itemSelector: '.box',
// ...
回答by gladiesobmerga
you can also use bootstrap loading button to trigger the .load() and the function after .load()
您还可以使用引导加载按钮来触发 .load() 和 .load() 之后的函数
HTML
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;
});
