How to run jQuery before and after a pjax load?

Question

I'm currently using pjax and it works great but I need to run two jQuery functions, one before pjax loads the new url and one after the new url is loaded, how can I do this?

I have tried the following two variations but neither seem to work?

First attempt:

$("a").pjax("#main").live('click', function(){

    //Function Before Load  
    // Function After Load
})  

Second attempt:

$("body").on("click", "a", function(){

    //Function Before Load  

    $(this).pjax("#main");

    //Function After Load   

    return false;
});

Answer 1

As they says in their doc here pjax fires two events for what you need

pjax will fire two events on the container you've asked it to load your reponse body into:

pjax:start - Fired when a pjax ajax request begins.

pjax:end - Fired when a pjax ajax request ends.

And the code example for this

$('a.pjax').pjax('#main')
$('#main')
  .on('pjax:start', function() { //do what you want to do before start })
  .on('pjax:end',   function() { //after the request ends });

Answer 2

$("body").on("click", "a", function(){

 $(this).pjax("#main");
 $('a.pjax').pjax('#main')
 $('#main').on('pjax:start', function() { /* your code before ajax load */ });
 $('#main').on('pjax:end',   function() { /* your code after ajax load */ });

  return false;
});