这个JavaScript为什么会失败？

在此的jsfiddle这个JavaScript为什么会失败？

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; 
});

来源

2011-09-15 Sandra Schlichting

正如答案所说，你不能在'tbody'里面有'form'。 Firefox甚至可以从一开始就纠正错误，因此在Firefox中，单击按钮将重新加载页面并且不显示警报。 –

你不能把一个form为tbody所以当表被排序，投入也越来越拉出每种形式的并放在表单外部的单独行中。

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

来源

2011-09-15 15:01:29 Dennis

您直接绑定到$（“form”）。这在您尝试排序之前工作正常。一旦你排序，tablesorter重绘整个表。这个不幸的副产品是它重新绘制了表单标签外部的表格。

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

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

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

来源

2011-09-15 15:02:18

但是，您希望绑定表单上的“提交”事件，因为有多种方式发布表单，而不仅仅是通过单击按钮。 – voigtan

唯一有效的解决方案是修复HTML。 –

您的标记是无效的，你不能有这样的

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

来源

2011-09-15 15:03:21 Headshota

你的形式标记形式标记正在造成问题。你必须使用<form>内<tr>之前</tr> 这里是改变的标记http://jsfiddle.net/JQ6qF/3/（如@Felix王建议）工作演示关闭

或者您可以使用

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

     alert('test'); 

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

工作演示的点击http://jsfiddle.net/JQ6qF/1/

来源

2011-09-15 15:07:10 Usman

唯一有效的解决方案是修复HTML。然后JavaScript代码也可以正常工作。 –

我已编辑答案添加了您的建议，谢谢。 – Usman

这个JavaScript为什么会失败？

回答

相关问题