apply plugin to a new element in the DOM (jquery)

Question

I am using the jquery tablesorter plugin and applies it to a table with id : #table

my search facility requests for results via ajax and replaces the table with a new table of the same id

if my code is like this :

$('#table').tablesorter();

what do I add to apply to make the plugin work on the new table? (I know of jquery's live event, but how do I use that in this case?

Answer 1

$.live() will not work in this case. You'll need to manually re-apply it to all new tables following the ajax-success.

Answer 2

You could do

function newTable() { // or whatever...
    var $table = $('<table />'); // create new table
    $table.tablesorter();
};

Answer 3

you have to re-run $('#table').tablesorter(); after search request completed.

$.ajax({
 type: "POST",
 url: "search.php",
 data: "query=blabla",
 success: function(html){

    // replace old table with new table

    // re-apply table sorter
    $('#table').tablesorter();

 }

});

Answer 4

expanding on what Q8-coder said, anything you insert into the dom (even if it was there before) usually must be rebound to any event handlers and functions.

supposedly jQuery's made (or is making) a deep clone of DOM Nodes including the event handlers as well. this would be cool, because it solves this problem.