I've a code to sort table using Jquery.I use toggle function to alternate clicks,and toggle beetween 'ascend' and 'descend' sort.Once you click header's table it should sort it contents.

However,there's a bug:

I click once,it sorts,then when i click again,nothing happens.I need to click again (second time) to execute the second function,and sort again.

Toggle should switch functions with single clicks,not double,am i right?

Here is the code:

 firstRow.toggle(function() {
        $(this).find("th:first").removeClass("ascendFirst").addClass("descendFirst");
        $(this).find("th:not(first)").removeClass("ascend").addClass("descend");

        sorted = $.makeArray($("td:eq(0)", "tr")).sort().reverse();
        sorted2 = $.makeArray($("td:eq(1)", "tr")).sort().reverse();
        sorted3 = $.makeArray($("td:eq(2)", "tr")).sort().reverse();

        for (var i = 0; i < sorted.length; i++) {
            $("td", "tr:eq(" + (i + 1) + ")").remove();
            $("tr:eq(" + (i + 1) + ")").append($("<td></td>").text($(sorted[i]).text()));


            $("tr:eq(" + (i + 1) + ")").append($("<td></td>").text($(sorted2[i]).text()));


            $("tr:eq(" + (i + 1) + ")").append($("<td></td>").text($(sorted3[i]).text()));

        }
    }, function() {
        $(this).find("th:first").removeClass("descendFirst").addClass("ascendFirst");
        $(this).find("th:not(first)").removeClass("descend").addClass("ascend");

        sorted = $.makeArray($("td:eq(0)", "tr")).sort();
        sorted2 = $.makeArray($("td:eq(1)", "tr")).sort();
        sorted3 = $.makeArray($("td:eq(2)", "tr")).sort();

        for (var i = 0; i < sorted.length; i++) {
            $("td", "tr:eq(" + (i + 1) + ")").remove();
            $("tr:eq(" + (i + 1) + ")").append($("<td></td>").text($(sorted[i]).text()));


            $("tr:eq(" + (i + 1) + ")").append($("<td></td>").text($(sorted2[i]).text()));


            $("tr:eq(" + (i + 1) + ")").append($("<td></td>").text($(sorted3[i]).text()));

        }
    });