Функция вызова после .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 ); 
    });
}
);
});

Я попытался объединить их так, чтобы 2-й функции вызывались после .load(после некоторого поиска на этом сайте и просмотра данных ответов/примеров), но ничего не работает должным образом.

Предложения?

Ответ 1

Чтобы запустить код после завершения .load(), вам нужно поместить код в функцию завершения для .load(). Операция загрузки асинхронна, поэтому функция загрузки начинает загрузку содержимого, а затем немедленно возвращается и выполнение JS продолжается (до завершения загрузки). Итак, если вы пытаетесь работать с недавно загруженным контентом, он еще не появится.

Поскольку ваш код написан сейчас, у вас есть два блока кода, которые выполняются, когда исходный HTML-документ готов. Первый блок запускает операцию .load(). Вторая операция ожидает, что .load() будет выполнен уже, но он еще не завершен, поэтому содержимое из .load() еще не доступно.

Вот почему .load() принимает функцию завершения в качестве аргумента. Это функция, которая будет вызываться при завершении загрузки. Подробнее см. соответствующий 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 на .load() рассказывает о параметрах, которые выполняет функция загрузки:

.load(обработчик (eventObject))

.load([eventData], обработчик (eventObject))

В этом случае вы передаете $(this).attr('rel') в качестве eventData, поэтому после этого вы добавляете обработчик событий:

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

В вашем втором блоке кода вы сообщаете jQuery, чтобы выполнить его, когда ваш организм загружается, а не когда вы загружаете больше на свой сайт. Вам нужно выполнить его специально, поэтому измените начало этой функции на:

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

Ответ 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;
  });