jquery tablesorter ajax table only sorting one direction

Question

I have a table that I load via a jQuery load command. in the callback of the load function I initiate the tablesorter plugin. For some reason then the table only sorts descending not ascending. Even weirder, if I hold shift it will toggle correctly between asc and desc? Any idea what's going on here?

table.php

<table id="xyz">
<thead>
    <tr>
        <th>hi</th>
    </tr>
</thead>
<tbody>
    <tr>
        <td>a</td>
    </tr>
    <tr>
        <td>b</td>
    </tr>
    <tr>
        <td>c</td>
    </tr>
</tbody>
</table>

jquery

$("#myDiv").load("table.php", function() {
    $("#xyz").tablesorter();
});

if I don't load the table via ajax then the tablesorter functions as expected.

Answer 1

Okay so I was double-binding like Jason thought.

I was actually calling jQuery's load function on a class and I had two div's with that class on my page. So it actually was calling the callback function twice?

I think it's kind of weird behaviour as the content being loaded into both divs was the same but it looks like jQuery does a separate ajax call for each of the divs. Thanks for your comments!

Answer 2

Just thought I would throw another answer up here in case anyone else runs into this. This happened to me when I tried to call .tablesorter() on a table using a class selector instead of an id selector. So changing it from

$('.tablesorter').tablesorter();

to

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

(and the markup to reflect this) fixed this problem for me.