Geek asks and answers

Apply plugin to new element in DOM (jquery)

I use the jquery tablesorter plugin and apply it to a table with id: #table

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

if my code is as follows:

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

What can I add to make the plugin work with the new table? (I know the jquery live event, but how to use it in this case?

+2
source share
4 answers

you need to restart $('#table').tablesorter();after the search request is 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();

 }

});

+4
source

$. live () will not work in this case. You will need to manually reapply it to all new tables after ajax success.

0
source 

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

Extending what the Q8 encoder said, everything you insert into dom (even if it was before) should usually bounce off any event handlers and functions.

supposedly jQuery made (or does) a deep clone of DOM nodes, including event handlers. that would be cool because it solves this problem.

0
source

More articles:


All Articles