Why does this JavaScript fail?

Question

In this JSFiddle

http://jsfiddle.net/JQ6qF/

have I striped down the problem.

Try click on "Save" and you will see that you get an alert.

Now click on either "Signed" or "A". The rows are now sorted using TableSorter.

When clicking on "Save" now, then nothing happens, where I would have expected to see the alert box again.

Question

Can someone figure out to fix the JavaScript, so the Save button works even after the rows have been sorted?

HTML

<div class="page-body">

    <table class="alerts tablesorter" id="accTable" cellspacing="0">
        <thead> 
            <tr class="header">
                <th class="activity-header"> A </th>
                <th class="activity-header"> Signed </th>
                <th class="activity-header">  </th>
            </tr>
        </thead> 

        <tbody>      

            <form action="" method="post">
                <input name="anchor" value="7249" type="hidden">
                <tr class="row" id="7249">
                    <td class="activity-data">7249</td>
                    <!-- tablesorter can't sort a column with check boxes out-of-the-box, so it needs something to sort on. That is why the span tag is here -->
                    <!-- a jquery script is watching the state of the checkbox, so when clicked the value in the span is updated -->
                    <td class="checkbox"> <span style="display:none;">0</span> <input name="signed" type="checkbox" > </td>
                    <td class="edit-column"> <input value="Save" type="submit"></td>
                </tr>
            </form>

            <form action="" method="post">
                <input name="anchor" value="61484" type="hidden">
                <tr class="row" id="61484">
                    <td class="activity-data">61484</td>
                    <td class="checkbox"> <span style="display:none;">1</span> <input name="signed" type="checkbox" checked > </td>
                    <td class="edit-column"> <input value="Save" type="submit"></td>
                </tr>
            </form>

        </tbody>
    </table>

</div>

JavaScript

$(document).ready(function() {
    $("#accTable").tablesorter();

    // :checkbox stops from executing the event on the save button. Same as input[type=checkbox]
    $('#accTable input:checkbox').click(function() {
        // insert 1 or 0 depending of checkbox state in the tag before the input tag. In this case <span> is before <input>
        // this is done so tablesorter have something to sort on, as it doesn't support checkbox sort out of the box.
        var order = this.checked ? '1' : '0';
        $(this).prev().html(order);

        $(this).parents("table").trigger("update");
    });
});

// sends the form content to server side, and stay on page
$('form').live('submit', function() {

    alert('test');

    // don't redirect
    return false;
});

Answer 1

You can't put a form into a tbody so when the table gets sorted, the inputs are getting pulled out of each form and put into separate rows outside of the form.

You can wrap the entire table in a form and give each button a name to identify which row is being submitted. JSfiddle: http://jsfiddle.net/JQ6qF/2/

Answer 2

You are binding directly to $("form"). This works fine before you try to sort. Once you sort, tablesorter redraws the entire table. The unfortunate byproduct of this is that it is redrawing the table OUTSIDE of your initial form tag.

The simple fix would be to attach the click events to the specific buttons:

<input type='submit' class="btnSubmit">

$("input.btnSubmit").live("click", function() { ...