当jQuery加载表单时，jQuery提交表单未激活
Posted
技术标签:
【中文标题】当jQuery加载表单时，jQuery提交表单未激活【英文标题】：jQuery on submit for a form not activating, when jQuery loads the form 【发布时间】：2016-11-29 04:39:33 【问题描述】：我有一个令人费解的错误。
我正在将一个 html 文件加载到一个仅包含一个表单的 div 中，但我的 jQuery .on('submit') 不起作用。
如果我不将 html 加载到 div 中，而是将其放在原始文件中，那么 ".on('submit') 可以工作。我看不出有什么区别。
在 MAC 上使用谷歌浏览器查看脚本
加载文件的原因是我有不同的表格，这取决于谁在使用脚本。
是我搞砸了时间错误还是执行顺序？
HTML 和 JS
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
</head>
<body>
<div id="divHeader">
<form id="frmLookup" method="post">
<table id="tblHdr">
<tr>
<td><img id="logo" src="Logo120.jpg" /></td>
<td>
<input id="inpHdr" type="text" name="qryWords" size="23"
placeholder="your search word/s, number/s" onfocus="this.placeholder = ''"
onblur="this.placeholder = 'your search word/s, number/s'" />
</td>
<td>
<button id="btnHdrFind" type="submit" value=" Find Trees " name="Find" > Find<br>Trees </button>
</td>
<td>
<span id="hdrName">My Site</span>
</td>
<td>
<button type="button" class="btnHdr" name="Help"
onClick="toggleHelp();" >Help<br>?</button>
</td>
</tr>
</table>
</form>
</div>
<div id="divResults"></div>
<script>
// ********************** WHEN I DO THIS IT My on submit DOES NOT WORK ????????????????
//$( "#divHeader" ).load( "sHeader.html", function()
//);
$("#frmLookup").on('submit', function(e)
e.preventDefault();
alert("Submitting");
getData("data");
);
function getData(frm)
alert("processing Form and Call AJAX for Results");
return;
</script>
我加载的文件
<form id="frmLookup" method="post">
<table id="tblHdr">
<tr>
<td><img id="logo" src="Logo120.jpg" /></td>
<td>
<input id="inpHdr" type="text" name="qryWords" size="23"
placeholder="your search word/s, number/s" onfocus="this.placeholder = ''"
onblur="this.placeholder = 'your search word/s, number/s'" />
</td>
<td>
<button id="btnHdrFind" type="submit" value=" Find Trees " name="Find" > Find<br>Trees </button>
</td>
<td>
<span id="hdrName">Trees in the Arboretum</span>
</td>
<td>
<button type="button" class="btnHdr" name="Help"
onClick="toggleHelp();" >Help<br>?</button>
</td>
</tr>
</table>
</form>
【问题讨论】：
【参考方案1】：您的问题是 jQuery 的 .load() 函数是异步。
当 jQuery 加载文件时，它继续并注册事件处理程序（在尚未加载的 html 上），然后呈现文件，因此事件处理程序不会触发。
试一试
A) 将您的事件处理程序放在.load() 的回调函数中，如下所示：
$( "#divHeader" ).load( "sHeader.html", function()
$("#frmLookup").on('submit', function(e)
e.preventDefault();
alert("Submitting");
getData("data");
);
);
或
B) 像这样使用事件委托：
$( "#divHeader" ).load( "sHeader.html", function() );
$(document).on('submit', "#frmLookup", function(e)
e.preventDefault();
alert("Submitting");
getData("data");
);
另外，值得一提的是，您的 jQuery 代码应该在文档就绪函数中。
$(function ()
// all code goes here
);
【讨论】：
非常感谢。我使用了 A 版，效果很好。我将按照您的建议将代码添加到 Doc.ready。 @mcl 太好了！很高兴我能帮上忙 =)以上是关于当jQuery加载表单时，jQuery提交表单未激活的主要内容，如果未能解决你的问题，请参考以下文章
Django：jQuery触发表单提交onchange of checkbox并保留重新加载时的值