[英]How to add JQuery to html loaded from ajax call?
我在這樣的jsp中有一個div:
<div id="response" class="response"></div>
在對servlet進行ajax調用后,此div附加為:
<div id="response" class="response">
<h3>Connected as user : Tony</h3>
<p>You selected the procedure : <B>lg_resultsretrieval</B></p>
<div class="showbiz">
<label>Enter procedure input variables : </label></div>
<div class="actual-input">
<label>Parameter1: </label><textarea name='text1' id='text1' class='txtarea' rows='1' cols='50'>starttime - timestamp without time zone</textarea><br>
<label>Parameter2: </label><textarea name='text2' id='text2' class='txtarea' rows='1' cols='50'>endtime - timestamp without time zone</textarea><br>
<label>Parameter3: </label><textarea name='text3' id='text3' class='txtarea' rows='1' cols='50'>in_sourceindicator - integer</textarea><br>
<label>Parameter4: </label><textarea name='text4' id='text4' class='txtarea' rows='1' cols='50'>keyword - character varying</textarea><br>
</div>
</div>
我為textarea編寫了一個jquery函數,如下所示:
//submits only when the textbox value is valid
$("#response").on("change", function() {
$("#Execute").click(function () {
if ($(".txtarea").val() == this.defaultValue)
{
alert("Please insert a valid value");
return false;
}
});
$("txtarea")
.focus(function() {
if (this.value === this.defaultValue) {
console.log('inside focus function');
this.value = '';
}
})
.blur(function() {
if (this.value === '') {
this.value = this.defaultValue;
}
});
});
問題是,盡管上面的代碼在jquery文檔中說要對動態加載的元素使用on函數,但上面的代碼不起作用。 我該如何運作? 請建議
如果div
本身已在DOM中被替換,則實際上附加到該div
任何處理程序都將丟失。 注意如何在此處附加處理程序:
$("#response").on("change", function() {
// code
});
當評估$("#response")
選擇器時,它會將處理程序直接附加到div
。 處理程序是附加到element上的 ,而不是附加到動態選擇器上的。 為了保留添加/替換元素的處理程序,您需要綁定到父元素並為目標元素過濾。 像這樣:
$(document).on("change", "#response", function() {
// code
});
這會將處理程序綁定到document
對象,該對象不會更改,因此處理程序不會隨着子元素的更改而丟失。 (僅供參考,我昨天實際上只是在寫博客 。)
這對於動態添加的element.use無效:
$(document).on("change",'"#response"', function() {
//code here
});
首先,您的div具有ID響應。 然后在此div中添加html之后,您可以像這樣綁定所有添加的html的jquery事件:
$("#response").on(EventName,htmlDom, function() {
//to do your code
});
例如對於textArea嘗試這樣:
$("#response").on("focus","textarea", function() {
//to do your code
});
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.