It didn’t take me long to realize that jQuery’s AJAX functions don’t trigger the $(document).ready() event. But then, it wouldn’t really make any sense if they did. Naturally, this event fires just once and naturally, AJAX leaves it alone. Therefore, it becomes necessary to supply event handlers to the AJAX callback functions, even if it means duplicating handlers in the DOM.

In my scenario, I had a styled table using the tablesorter plugin (id #tablesort).

Initial code sample:

$(document).ready(function() {
 $("#tablesort").tablesorter({
 	widgets:['zebra'],
 	sortInitialOrder: 'asc'
      });
 $("#tablesort tr").hover(function(){
 	$(this).addClass("over");
 		 },function(){
 	$(this).removeClass("over");
 });
 $("#tablesort tbody").hover(function() {
 	$(this).css({overflow-y: "auto"});
 }, function() {
 	$(this).css({overflow-y: "hidden"});
 });
});

With the inclusion of the AJAX function, each record in the data table would contain a link to generate further detail in a new table, for which I also wanted to apply the tablesorter styles (another id #tablesort.) This looked something like:

 	$("input.more").click(function() {
		$("#ajax_div").html("Retrieving data...");
 		 $.post("./include/ajax_table.php", {sql: $(this).val() },  function(data){
     				$("#ajax_div").html(data);
   		});
   	});

While this is enough to generate and display a second #tablesort, the new table lacks the same styles that jQuery applied to the first #tablesort on $(document).ready(). So, my first instinct was to simply copy & paste the event handlers into my jQuery callback function, like so:

 		$("input.more").click(function() {
 			$("#ajax_div").html("Retrieving data...");
 		 	$.post("./include/ajax_table.php", {sql: $(this).val() },  function(data){
     					$("#ajax_div").html(data);
 					$("#ajax_div tablesort").tablesorter({
 						widgets:['zebra'],
 						sortInitialOrder: 'asc'
 					     });
 					$("#ajax_div tablesort tr").hover(function(){
 						$(this).addClass("over");
 							 },function(){
 						$(this).removeClass("over");
 					});
 					$("#ajax_div tablesort tbody").hover(function() {
 						$(this).css({overflow-y: "auto"});
 					}, function() {
 						$(this).css({overflow-y: "hidden"});
 					});
			 });
		});

Now, I had what I wanted — two #tablesort tables with identical styles. However, I also had a bunch of redundant and messy code at the top of my page. To fix this, I simply stored a function in an external file to handle the styling of all my #tablesort tables. Utilizing the find() function, this was even easier to do:

function tablesortStyles(jthis) {
	jthis.find("#tablesort").tablesorter({
		widgets:['zebra'],
		sortInitialOrder: 'asc'
	     });
	jthis.find("#tablesort tr").hover(function(){
		$(this).addClass("over");
			 },function(){
		$(this).removeClass("over");
	});
	jthis.find("#tablesort tbody").hover(function() {
		$(this).css({overflow-y: "auto"});
	}, function() {
		$(this).css({overflow-y: "hidden"});
	});

	return true;
}

Now, I only needed to use two lines in my source file to style my tables:

$(document).ready(function() {
		tablesortStyles($(document));

		$("input.more").click(function() {
                   $("#ajax_div").html("Retrieving data...");
			 $.post("./include/ajax_table.php", {sql: $(this).val() },  function(data){
     					$("#ajax_div").html(data);
					tablesortStyles($("#ajax_div"));
   			 });
   		}); 

	});