The first click triggers an ajax call and inserts the content into a different element. The code for this is not shown and is provided by drupal. it relies on the starting use-ajax class. this also removes the use-ajax class and adds the hide class.

This means the code in the first event (bellow) which runs when .use-ajax is clicked can only run once, the remaining two events are a loop.

After this clicking toggles the show and hide class and i intend to use this to determine which function runs out of the last two in the code bellow (right now they just swap the classes but when i get it right they will also show/hide the ajax generated content.

My problem is that although firefox dev tools show that the use-ajax class is being removed and the hide class is being added by the first click each click always triggers the code which should run when an element with use-ajax is clicked (this is shown by firefox debugger)

I have tried the code at the bottom without the .trigger function - this displayed the same behavior
I have also tried the delegated events version of on
ie
jQuery(' td p').on('click','a.use-ajax',function.......
This version does not run at all. 

jQuery(document).ready(function(){

    jQuery('td p a.use-ajax').on('click',function() {
        jQuery(this).html('hide document');
        jQuery(this).removeClass( 'use-ajax' );
        jQuery(this).addClass( 'hide' );
        jQuery(this).trigger('cssClassChanged');
    });

    jQuery('td p a.show').on('click',function() {
        jQuery(this).html('hide document');
        jQuery(this).removeClass( 'show' );
        jQuery(this).addClass( 'hide' );
    });

    jQuery('td p a.hide').on('click',function() {
        jQuery(this).html('show document');
        jQuery(this).removeClass( 'hide' );
        jQuery(this).addClass( 'show' );
    });

});