Question

为什么#1被调用__doPostback（当HTML呈现时由ASP.NET自动创建这个动态JavaScript函数。我认为当启用了事件验证时），但#2被调用document.forms[0].onsubmit = function() { alert("called submit 1"); jQuery("#<%=DDLUCSAddress.ClientID %>").children("option").each(function() { jQuery(this).remove(); }); }; 1}}没有被调用。然而，当点击一个按钮时，两个都会被调用？

＃1

jQuery("form").submit(function() {
    alert("called submit 2");
    jQuery("#<%=DDLUCSAddress.ClientID %>").children("option").each(function() {
            jQuery(this).remove();
    });
});

＃2

Ctrl+K+D

呈现的HTML - 如果我在此代码上执行Ctrl + K + D，则由于空格，它超出了Stack Overflow的字符限制。如果您希望将其格式化，请将其放入Visual Studio并按<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <body> <div id="sessionRefresh" style="display:none"> <script language="JavaScript" type="text/javascript" /> <form id="Form1" onsubmit="javascript:return WebForm_OnSubmit();" action="EditSampleDetails.aspx?LabAccessioningNumber=20120401-1&SampleTypeContext=247" method="post" name="Form1"> <div> <script type="text/javascript" /> <script type="text/javascript" src="/WebResource.axd?d=EXaDJPTWpPG72bTbiKNh_OuYVox46idcF5L2FHTyi19FoknASLIR-iSOhjjdC3Xa0OCTSAQepXg5UpNN1TPkcREtvcQ1&t=634208598757546466" /> <script type="text/javascript" language="javascript" /> <script type="text/javascript" src="/WebResource.axd?d=4scrxOSLDbM-cgeLoXFnrTxM83c-T6NjCtRi_ghVZlXN0qjfjwNCtjtRWczFgkWux80g8Ip0p9JqPBJcPSlcT3N25CA1&t=634208598757546466" /> <script type="text/javascript" /> <div> <div id="mainMenu" class="droplinetabs"> <table cellspacing="0" cellpadding="0" border="0"> <table class="uIBoxStacked" width="100%" cellspacing="0" cellpadding="0" border="0"> <tbody> <tr> <tr> <td class="uIBoxInternal" colspan="2"> <table width="100%" cellspacing="0" cellpadding="0" border="0"> <tbody> <tr> <td> <div id="BxWizardTitle" style="border-color:LightSteelBlue;width:100%;"> <a href='javascript:WebForm_DoPostBackWithOptions(new WebForm_PostBackOptions("ctl00", "", true, "", "", false, true))'></a> <a href='javascript:WebForm_DoPostBackWithOptions(new WebForm_PostBackOptions("ctl01", "", true, "", "", false, true))'></a> <a href='javascript:WebForm_DoPostBackWithOptions(new WebForm_PostBackOptions("ctl02", "", true, "", "", false, true))'></a> <a href='javascript:WebForm_DoPostBackWithOptions(new WebForm_PostBackOptions("ctl03", "", true, "", "", false, true))'></a> <table cellspacing="0" cellpadding="0" style="border-width:0px;"> <tbody> <tr> <td class="leftNavigationCell" style="vertical-align:top;"> <td> <td valign="top"> <table cellpadding="5"> <tbody> <tr> <tr> <td> <table cellpadding="5"> <tbody> <tr> <tr> <tr> <td> <script type="text/javascript" /> <table class="uIBoxStacked" width="100%" cellspacing="0" cellpadding="0" border="0"> <tbody> <tr> <tr> <td class="uIBoxInternal" colspan="2"> <table class="outerTableOfInputs" width="100%" cellspacing="0"> <tbody> <tr> <td> <table class="tableOfInputs" width="100%" cellspacing="0"> <tbody> <tr> <td> <div id="FullDataEntryEditor_UIBSampleInfo" style="border-color:LightSteelBlue;width:100%;"> <a href='javascript:WebForm_DoPostBackWithOptions(new WebForm_PostBackOptions("FullDataEntryEditor$ctl00", "", true, "", "", false, true))'></a> <a href='javascript:WebForm_DoPostBackWithOptions(new WebForm_PostBackOptions("FullDataEntryEditor$ctl01", "", true, "", "", false, true))'></a> <a href='javascript:WebForm_DoPostBackWithOptions(new WebForm_PostBackOptions("FullDataEntryEditor$ctl02", "", true, "", "", false, true))'></a> <a href='javascript:WebForm_DoPostBackWithOptions(new WebForm_PostBackOptions("FullDataEntryEditor$ctl03", "", true, "", "", false, true))'></a> <table> <script type="text/javascript" /> <tbody> <tr> <tr> <tr> <tr> <td>Additional Client Number</td> <td> <input id="FullDataEntryEditor_TxtAdditionalClientNumber" class="LIMSFormField" type="text" autocomplete="off" name="FullDataEntryEditor$TxtAdditionalClientNumber"> </td> </tr> <tr> <tr> <tr> <tr> <tr> <tr> <tr> <tr> <tr> </tbody> </table> </div> </td> </tr> </tbody> </table> </td> </tr> </tbody> </table> </td> </tr> </tbody> </table> <table class="saveCancelDeleteOuter" width="100%" cellspacing="0"> <table width="100%" cellspacing="0" cellpadding="0" border="0"> <tbody> <tr> <td> <input id="EditObjectId986257676" type="hidden" value="" name="EditObjectId986257676"> <input id="CommandName986257676" type="hidden" value="" name="CommandName986257676"> <table class="uIBoxStacked" width="100%" cellspacing="0" cellpadding="0" border="0"> <tbody> <tr> <tr> <tr> <td class="uIBoxInternal" colspan="2"> <table width="100%" cellspacing="0" cellpadding="0" border="0"> <tbody> <tr> <td> <div id="FullDataEntryEditor_NMNotes_List_ListBox" style="border-color:LightSteelBlue;width:100%;"> <a href='javascript:WebForm_DoPostBackWithOptions(new WebForm_PostBackOptions("FullDataEntryEditor$NMNotes$List$ctl00", "", true, "", "", false, true))'></a> <a href='javascript:WebForm_DoPostBackWithOptions(new WebForm_PostBackOptions("FullDataEntryEditor$NMNotes$List$ctl01", "", true, "", "", false, true))'></a> <a href='javascript:WebForm_DoPostBackWithOptions(new WebForm_PostBackOptions("FullDataEntryEditor$NMNotes$List$ctl02", "", true, "", "", false, true))'></a> <a href='javascript:WebForm_DoPostBackWithOptions(new WebForm_PostBackOptions("FullDataEntryEditor$NMNotes$List$ctl03", "", true, "", "", false, true))'></a> <table id="FullDataEntryEditor_NMNotes_List_ListGrid" cellspacing="0" cellpadding="4" border="1" style="width:100%;border-collapse:collapse;" rules="all"> <tbody> <tr class="columnHeader"> <tr style="background-color:Yellow;"> <td> <a href="javascript:listCustomPostback(986257676,'Edit',129285);">bbbbbbbbbbbbbb</a> </td> <td> </tr> </tbody> </table> </div> </td> </tr> </tbody> </table> </td> </tr> </tbody> </table> <div id="pdfDisplay"></div> <script language="javascript" type="text/javascript" /> </td> </tr> <tr> </tbody> </table> <script type="text/javascript" /> <input id="FullDataEntryEditor_HiddenSampleType" type="hidden" value="247" name="FullDataEntryEditor$HiddenSampleType"> <input id="FullDataEntryEditor_HiddenAJAXUCSAddressValue" type="hidden" value="7533" name="FullDataEntryEditor$HiddenAJAXUCSAddressValue"> <input id="FullDataEntryEditor_HiddenAJAXUCSAddressText" type="hidden" value="[7533] A1's Primary address, a1_primary_address, madison wi, usa 53719" name="FullDataEntryEditor$HiddenAJAXUCSAddressText"> </td> </tr> </tbody> </table> </td> </tr> </tbody> </table> </td> </tr> </tbody> </table> </div> </td> </tr> </tbody> </table> </td> </tr> </tbody> </table> <table class="saveCancelDeleteOuter" width="100%" cellspacing="0"> <script type="text/javascript" /> <script type="text/javascript" /> <script type="text/javascript" /> </form> <table class="copyright" align="center"> </body> </html>

{{1}}

Answer 1

第一个document.forms[0].onsubmit不是jQuery。它分配给文档中的第一个表单。如果您单击第一个表单上的“提交”按钮
第二个jQuery("form").submit是jQuery，但已归于您文档中的所有forms。如果您单击文档中每个表单上的“提交”按钮，则会被触发

Answer 2

__doPostback执行以下操作：

theform.onsubmit();

这是取onsubmit属性的值并执行它。提交使用jquery附加的处理程序不会在元素上设置为属性，因此在完成此操作时它们不会触发。

编辑：

来自jQuery源代码的相关代码：

if ( elem.addEventListener ) {
    elem.addEventListener( type, eventHandle, false );
} else if ( elem.attachEvent ) {
    elem.attachEvent( "on" + type, eventHandle );
}

这是jquery附加事件的方式，而不是onsubmit属性。

document.forms [0] .onsubmit和jQuery（＆＃34; form＆＃34;）之间的区别。提交

＃1

＃2

2 个答案: