這個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爲什麼會失敗？

回答

相關問題