我正在加载一个html文件到div，其中只包含一个表单，但是我的jQuery .on（'submit'）不起作用。

如果我不将HTML加载到DIV，而是有它的原始文件，那么”。对（‘提交’）的作品。我看不出差别。

使用谷歌Chrome浏览器在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>

来源

2016-07-25 mcl

你的问题是，jQuery的功能异步。

当jQuery加载文件时，它会继续并注册事件处理程序（在尚未加载的html上），然后呈现文件，因此事件处理程序不会触发。

尝试要么

A）把你的事件处理程序的像这样的回调函数：

$("#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 
});

来源

2016-07-25 18:03:32 mhodges

非常感谢。我使用了版本A，它运行良好。按照您的建议，我将向Doc.ready添加代码。 – mcl

@mcl太棒了！很高兴我能帮忙=） – mhodges

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

文件输入装载

回答

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

文件输入装载

回答

相关问题