我正在加載一個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加載表單時

文件輸入裝載

回答

相關問題