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 ne

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 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 3

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.

Answer 4

You could do

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