我在 jsp 中有一个像这样的 div :
<div id="response" class="response"></div>
此 div 在对 servlet 进行 ajax 调用后附加为:
<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>
我为文本区域编写了一个 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
});
这会将处理程序直接附加到 div
,因为它在评估 $("#response")
选择器时存在。处理程序附加到元素,而不是动态选择器。为了保留添加/替换元素的处理程序,您需要绑定(bind)到父元素并过滤目标元素。像这样:
$(document).on("change", "#response", function() {
// code
});
这会将处理程序绑定(bind)到 document
对象,该对象不会更改,因此处理程序不会随着子元素的更改而丢失。 (作为引用,我实际上是 just blogged about this 昨天。)
关于javascript - 如何将 JQuery 添加到从 ajax 调用加载的 html 中?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/22351221/