【问题标题】：jQuery on submit for a form not activating, when jQuery loads the form当jQuery加载表单时，jQuery提交表单未激活
【发布时间】：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>

【问题讨论】：

标签： jquery forms onsubmit jquery-load

【解决方案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 太好了！很高兴我能帮上忙 =)