JQuery not working with ajax page load

Question

I am using ajax to load the page. But when my page load I have jQuery on the loaded page template that is not working . If i refresh the page then it start working.

I am using ready function as:

jQuery(document).ready(function() {

    jQuery('#tabs li a:not(:first)').addClass('inactive');
    jQuery('.tab-content').hide();
    jQuery('.tab-content:first').show();
    jQuery('#tabs li a').click(function() {
        var t = jQuery(this).attr('id');
        if (jQuery(this).hasClass('inactive')) {
            jQuery('#tabs li a').addClass('inactive');
            jQuery(this).removeClass('inactive');
            jQuery('.tab-content').hide();
            jQuery('#' + t + 'C').fadeIn('slow');
        }
    });

});

But it not showing any alert when i click on the page link and page is loaded using ajax without refresh.

How i can make the jquery workable please help

I have to load two function at the success of the ajax call only one of them is wokring not both of them at the same time:

$.ajax({
            url: url,

            success: 
            function(data){
                $('#tabs li a:not(:first)').addClass('inactive');
            $('.tab-content').hide();
            $('.tab-content:first').show();
            $('#tabs li a').click(function(){
            var t = $(this).attr('id');
            if($(this).hasClass('inactive')){ 
            $('#tabs li a').addClass('inactive');           
            $(this).removeClass('inactive');
            $('.tab-content').hide();
            $('#'+ t + 'C').fadeIn('slow');
            }
            });

            }

            function(data, textStatus, jqXHR){
                alert("working");
           },
           error: function(jqXHR, textStatus, errorThrown){
                document.location.href = url;
                return false;
            }

How it could be possible?

Answer 1

Please use the success function to find whether the functionality is executing successfully or not,

$(document).ready(function (){
 $.ajax({                                      
    jQuery('#tabs li a:not(:first)').addClass('inactive');
    jQuery('.tab-content').hide();
    jQuery('.tab-content:first').show();
    jQuery('#tabs li a').click(function() {
    var t = jQuery(this).attr('id');
        if (jQuery(this).hasClass('inactive')) {
            jQuery('#tabs li a').addClass('inactive');
            jQuery(this).removeClass('inactive');
            jQuery('.tab-content').hide();
            jQuery('#' + t + 'C').fadeIn('slow');
        }
    });
    success: function(this) {
        alert(this);
    }
  });
});

Answer 2

I got is i have laoded my Jquery in a new function on ajaxSuccess as follows and it works perfectly

         jQuery(document).ready(function(){
          jQuery(document).ajaxSuccess(function() {
            jQuery('#tabs li a:not(:first)').addClass('inactive');
            jQuery('.tab-content').hide();
            jQuery('.tab-content:first').show();

        jQuery('#tabs li a').click(function(){
          var t = jQuery(this).attr('id');
            if(jQuery(this).hasClass('inactive')){ 
              jQuery('#tabs li a').addClass('inactive');           
              jQuery(this).removeClass('inactive');
              jQuery('.tab-content').hide();
              jQuery('#'+ t + 'C').fadeIn('slow');
            }
       });
   });