Execute custom function on dynamic loaded page in jQuery

Question

I have tab in a web page that loads and displays another page dynamically, using this code:

$(document).ready(function(){
    $(".tab-content").hide();
    $("#one").show();
    $("a.tab-name").click(function(){
        $(".tab-name-active").removeClass("tab-name-active");
        $(this).addClass("tab-name-active");
        $(".tab-content").fadeOut();
        var content_show=$(this).attr("title");
        if (content_show === 'three') {
            $("#"+content_show).load('new-page.php');
        }
        $("#"+content_show).delay(100).fadeIn('slow');
        return false;
    });
});

Now, in the initial page I have this code, that should make sortable a table form the second page, the one loaded dynamically:

$(document).ready(function(){
    $("#sorttable").tablesorter({
        headers: {0: {sorter: false}}
    });
});

The only problem is that the sort is not working. How can I make it work? I assume that is has something to do with the live() function, but I'm not able to make it work.
Any help is appreciated.

Thanks!

Answer 1

You can run the code again in the .load() callback, like this:

$("#"+content_show).load('new-page.php', function() {
  $("#sorttable").tablesorter({
    headers: {0: {sorter: false}}
  });
});

This will execute the .tablesorter() plugin again once the content is loaded.