How to fire event handlers after AJAX content has loaded in JQuery

Question

I'm trying to use an AJAX request to load some information into a table using JQuery. I can load the content easily but I am having problems adding event handlers to apply style on the loaded content.

I am applying a striping widget to the table. However when my AJAX request comes back and my information is appended to the table body it does not have the style applied.

The JQuery tutorial mentions using the load event to handle this, but I can't get it to work.

Any help would be appreciated.

$(document).ready(function(){
    $("#cowTable").tablesorter();
    addTableStriping();
});

function addTableStriping(){
    $("#cowTable").tablesorter({
        // striping looking
        widgets: ['zebra']  
    });
};

$(function(){
    $("#loadCowsButton").click(function(){
        $.post("loadCows.php", "scottm", function(xml) {
            $("#cowTable tbody").append(xml);
        });
    });
});

Answer 1

I've found a solution for this. You need to trigger "applyWidgets" after updating. Thanks for all the help from everyone, I wouldn't have found this out without your help.

$(function(){
    $("#loadCowsButton").click(function(){
        $.post("loadCows.php", "scottm", function(xml) {
            $("#cowTable").append(xml);
            $("#cowTable").trigger("update");
            $("#cowTable").trigger("applyWidgets")
        });
    });
});