jQuery 提交表单未激活，当 jQuery 加载表单时

Question

我有一个莫名其妙的错误。

我正在将 html 文件加载到 div 中，其中仅包含一个表单，但我的 jQuery .on('submit') 不起作用。

如果我不将 html 加载到 div 中，而是将其放在原始文件中，则 ".on('submit') 可以工作。我不能看到差异。

在 MAC 上使用 google Chrome 查看脚本

加载文件的原因是我有不同的表单，具体取决于谁在使用脚本。

是时间错误还是我搞错了执行顺序？

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>

Answer 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
});

jQuery 提交表单未激活，当 jQuery 加载表单时

jQuery on submit for a form not activating, when jQuery loads the form

forms

jquery

onsubmit

jquery-load

我加载的文件