Calling function after .load (Jquery)

Question

Having a little difficulty getting a function to call after a .load:

$(function(){
    $(\'a.pageFetcher\').click(function(){
        $(\'#main\').load($(thi         


        

Answer 1

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:

.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 after that:

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

In your second block of code, you're telling jQuery to execute it when your body loads, not when you load more into your site. You need to execute it specifically, so change the start of that function to:

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