tablesorter makes too many rows when changing table contents with ajax (but only if sorting settings!?)

tablesorter makes too many rows when changing table contents with ajax (but only if sorting settings!?)

When I re-use tablesorter() in my ajax done() function, I get a table that seems to have each row doubled from original and weirdly sorted.

Note1: My Ajax replaces the inside of the table; this is everything but the table start and end tag
Note2: This does NOT happen when I leave out initial sorting order.
Note3: It's the same with trigger("update") and so on..

Please help. Thank you.

  1. $(function() {
        $("#games").tablesorter({sortList: [[8,0]]})
    });


  2. $(function() {
        //this on-way (=delegated event) ensures event stays when new html is injected!
        $("#games").on( "click", "#up,#down", function() {
            $.ajax({
                type : "POST",
                data : {                direction : this.id                  }
            })
                .done(function(data, status, xhr) {
                    $("#games")
                        .html(data)
                    //trigger sorting reset       
                    //$("#games").tablesorter.destroy(); -> I though something like this could help?
                        .tablesorter({sortList: [[8,0]]}); //-> weirdly doubles table, OK without settings
                });
        });
    });