Question

在这个JSFiddle中

http://jsfiddle.net/JQ6qF/

我把这个问题搞定了。

尝试点击“保存”，您会看到收到提醒。

现在点击“签名”或“A”。现在使用TableSorter对行进行排序。

现在单击“保存”时，没有任何反应，我希望再次看到警告框。

问题

有人可以解决修复JavaScript问题，因此即使在对行进行排序后，“保存”按钮也能正常工作吗？

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

您无法将form放入tbody，因此当表格被排序时，输入会从每个表单中拉出并放入表单之外的单独行中。

您可以将整个表格包装在一个表单中，并为每个按钮指定一个名称，以标识正在提交的行。 JSfiddle：http://jsfiddle.net/JQ6qF/2/

Answer 2

您直接绑定到$（“表单”）。在尝试排序之前，这样可以正常工作。排序后，tablesorter会重绘整个表格。不幸的副产品是它正在重新绘制初始表单标签的OUTSIDE表。

简单的解决方法是将点击事件附加到特定按钮：

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

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

Answer 3

您的表单标记正在产生问题。您必须在<form>内使用<tr>并在</tr>之前将其关闭这是一个带有更改标记的工作演示http://jsfiddle.net/JQ6qF/3/（正如@Felix King建议的那样）

或者您可以使用

$('input[type="submit"]').live('click', function(){

      alert('test');

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

单击http://jsfiddle.net/JQ6qF/1/

的工作演示

Answer 4

您的标记无效，您不能拥有此类表单标记

<table>
<form>...</form>
<tr>...</tr>
</table>

为什么这个JavaScript会失败？

4 个答案: