Using jQuery script with Ajax in Wordpress

Question

I am using the Ajaxify WordPress Site (AWS) plugin for my wordpress site. I am also using a jQuery script for the menu. This basically animates the menu.

( function( $ ) {
$( document ).ready(function() {
$('#cssmenu li.has-sub>a').on('click', function(){
        $(this).removeAttr('href');
        var element = $(this).parent('li');
        if (element.hasClass('open')) {
            element.removeClass('open');
            element.find('li').removeClass('open');
            element.find('ul').slideUp();
        }
        else {
            element.addClass('open');
            element.children('ul').slideDown();
            element.siblings('li').children('ul').slideUp();
            element.siblings('li').removeClass('open');
            element.siblings('li').find('li').removeClass('open');
            element.siblings('li').find('ul').slideUp();
        }
    });

    $('#cssmenu>ul>li.has-sub>a').append('<span class="holder"></span>');

    (function getColor() {
        var r, g, b;
        var textColor = $('#cssmenu').css('color');
        textColor = textColor.slice(4);
        r = textColor.slice(0, textColor.indexOf(','));
        textColor = textColor.slice(textColor.indexOf(' ') + 1);
        g = textColor.slice(0, textColor.indexOf(','));
        textColor = textColor.slice(textColor.indexOf(' ') + 1);
        b = textColor.slice(0, textColor.indexOf(')'));
        var l = rgbToHsl(r, g, b);
        if (l > 0.7) {
            $('#cssmenu>ul>li>a').css('text-shadow', '0 1px 1px rgba(0, 0, 0, .35)');
            $('#cssmenu>ul>li>a>span').css('border-color', 'rgba(0, 0, 0, .35)');
        }
        else
        {
            $('#cssmenu>ul>li>a').css('text-shadow', '0 1px 0 rgba(255, 255, 255, .35)');
            $('#cssmenu>ul>li>a>span').css('border-color', 'rgba(255, 255, 255, .35)');
        }
    })();

    function rgbToHsl(r, g, b) {
        r /= 255, g /= 255, b /= 255;
        var max = Math.max(r, g, b), min = Math.min(r, g, b);
        var h, s, l = (max + min) / 2;

        if(max == min){
            h = s = 0;
        }
        else {
            var d = max - min;
            s = l > 0.5 ? d / (2 - max - min) : d / (max + min);
            switch(max){
                case r: h = (g - b) / d + (g < b ? 6 : 0); break;
                case g: h = (b - r) / d + 2; break;
                case b: h = (r - g) / d + 4; break;
            }
            h /= 6;
        }
        return l;
    }
});
} )( jQuery );

When the AWS plugin is active the menu script does not work. The menu works fine when the site is loaded, but if you enter an article (with the ajaxify plugin enabled) the menu script stops working. I am not sure why. I have tried using $(document).ajaxComplete(function(){ instead of: $( document ).ready(function() { but this causes the menu to work only if the ajax is loaded first (in other words you have to enter an article first for the menu to work). So it seems I am out of options.

How can I get the script to work both before and after the ajax is triggered? Alternatively, is there a way to re-trigger a jQuery script once ajax is loaded?

Test example here: http://testsite.seyoum.net/ Since this is a test site some of the links in the menu does not work. "Markup" and "unpublished" does work..

Answer 1

Instead of

$('#cssmenu li.has-sub>a').on('click', function(){...});

Try with

$(document).on('click', '#cssmenu li.has-sub>a', function(){...});

If you have a content that is loading with AJAX, and if you need to preform some kind of script with the click on this new element, you'll need to watch the entire document object for a click event. Alternatively you can watch for the container in which the content is loaded for a click events, it should work in theory iirc...