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

I have a puzzling error.

I am loading an html file into a div, which contains just a form, but my jQuery .on(‘submit’) does not work.

If I don’t load the html into the div and instead have it in the original file, then the ".on('submit') works. I can not see a difference.

Using google Chrome on a MAC to view the script

The reason for loading the file, is that I have different forms, depending on who is using the script.

Is it a timing error or execution order I have messed up ?

HTML and 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>

The File I Load

<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>

Solution

Your problem is that jQuery's .load() function is asynchronous.

While jQuery is loading the file, it moves on and registers the event handler (on html that isn't loaded yet), then it renders the file, and therefore the event handler does not trigger.

Try Either

A) Put your event handler in the callback function of .load() like so:

$( "#divHeader" ).load( "sHeader.html", function() {
    $("#frmLookup").on('submit', function(e) {
        e.preventDefault();
        alert("Submitting");
        getData("data");
    });
});

B) Use event delegation like so:

$( "#divHeader" ).load( "sHeader.html", function() {});

$(document).on('submit', "#frmLookup", function(e) {
    e.preventDefault();
    alert("Submitting");
    getData("data");
});

Also, it is worth mentioning that your jQuery code should be inside of a document ready function.

$(function () {
  // all code goes here
});