How do I execute a javascript after Ajax load?

Question

I need to add a class on after an ajax load. I first give a few elements a class "ready" which initiate a css transition. When the link li#menu-item-318 a gets clicked it removes the ready class which then reverses the css transition and then loads a new html document. On the Aja load I once again want to add the ready class to the same elements inserted by the Ajax call.

The code below has a callback to add the ready class, which works. But when the Ajax loads its sets the Ready class too early so there is no transition, even though my lines that is supposed to be drawn up is set.

I was thinking Its better I have a script for setting the classes on my transition elements inside the html that gets called by ajax to achieve my desired effect - but that doesn't work. So how do I do?

Demo: http://svensson.streetstylizm.com/ Click the photography - Polaroid link to se how it reverses the animation, loads the page and then just show the lines.

Code:

$(function () {
    $('.v-line, .h-line, .nav, #ban_image img').addClass('ready');
});

$('li#menu-item-318 a').click(function (e) {
    e.preventDefault();
    var linkNode = this;
    $('.v-line, .h-line, #ban_image img')
        .removeClass('ready')
        .one('webkitTransitionEnd otransitionend oTransitionEnd msTransitionEnd transitionend',

    function (e) {
        $(".js-pageTransition").load("photo.html .test> *");
    });
});

Solution 1

You can use ajaxComplete():

$.ajaxComplete(function () {
  // Something to execute after AJAX.
});

Have this as an example:

$( document ).ajaxComplete(function( event,request, settings ) {
  $( "#msg" ).append( "<li>Request Complete.</li>" );
});

As said by Popnoodles, this executes when any AJAX call completes. So if you are looking for executing the code in one particular AJAX call, you need to use the success function.

Solution 2

The way to do this would be use the ajaxcomplete function in jQuery which is called implicitly after the completion of any ajax call.

The examples in this link should get you started

.ajaxcomplete() Function