onclick按預期與jquery無法正常工作

Question

下面是示例代碼..如果我將其腳本註釋掉，它將在按鈕單擊時調用服務器端函數。在下面的代碼中會出現什麼錯誤？

<form id="form1" runat="server">  
    <input type="checkbox" id="chb1" value="Hourly" /> 
    <input type="checkbox" id="chb2" value="Daily" /> 
    <input type="checkbox" id="chb3" value="Weekly" /> 
    <input type="checkbox" id="chb4" value="Monthly" /> 
    <input type="checkbox" id="chb5" value="Yearly" /> 

    <asp:Button Text="submit" runat="server" ID="btnSubmit" OnClick="btnSubmit_Click"/> 
</form> 
<div></div> 

<script src="https://code.jquery.com/jquery-1.10.2.js"></script> 
<script type="text/javascript"> 

     var selectedcout = 0; 

     var countChecked = function() { 
      var n = $("input:checked").length;     
      $("div").text(n + (n === 1 ? "is" : "are") + "checked"); 
     }; 
     countChecked(); 

     $("input[type=checkbox]").on("click", countChecked); 

</script> 

Answer 1

您需要連接到submit事件的形式，而不是提交按鈕的click的，這樣就可以被阻止提交表單。試試這個：

var selectedcout = 0; 

var countChecked = function() {   
    var n = $("input:checked").length;     
    $("div").text(n + (n === 1 ? " is " : " are ") + "checked"); 
}; 

countChecked(); 

$('#form1').on('submit', function(e) { 
    e.preventDefault(); // stop the form submitting 
    countChecked(); 
});