gpt4 book ai didi

javascript - 为什么我的 jQuery 不适用于通过 ajax 加载的元素?

转载 作者:行者123 更新时间:2023-11-28 19:25:28 26 4
gpt4 key购买 nike

我有一个 jsp 页面,其中包含一个具有以下元素的表单:

<form class="form-inline" role="form" action="CadsInsertion" method="POST">
<div id="formItems" class="form-group">
<input type="text" id="date" name="date" placeholder="Date"><label class="btn btn-danger" id="_date">-</label>
</div>
<div class="col-lg-6 col-lg-offset-3">
<button id="submit" type="submit" class="btn btn-warning btn-lg">Submit</button>
</div>
</form>

加载页面时,我使用以下 jQuery 添加更多从我的 Servlet FormElements 获取的元素。

$(document).ready(function() {
$.ajax({
url: "FormElements",
data: {docType: "<%=session.getAttribute("docType")%>"},
success: function(data) {
if(data != null) {
$("#formItems").append(data);
}
}});
});

我在 servlet 中所做的基本上是处理来自 ajax 调用的数据并相应地编写一些 jsp 元素。为了简单起见,我将省略 Servlet 实现并直接跳到输出。

执行ajax代码后,新元素将添加到formItems分区中:

<input id="Image" type="text" placeholder="Image" name="Image">
<label id="_Image" class="btn btn-danger">-</label>
<br>
<input id="Format" type="text" placeholder="Format" name="Format">
<label id="_Format" class="btn btn-danger">-</label>
<br>
<input id="Type" type="text" placeholder="Type" name="Type">
<label id="_Type" class="btn btn-danger">-</label>

现在我的问题是,我使用以下 jQuery 从表单中删除元素:

$("label").click(function(e) {
var item = e.target.id;
item = item.replace("_", "");
$("#" + item).remove();
e.target.remove();
});

但这仅适用于我的页面中已静态定义的元素,不适用于使用 ajax 加载的元素。这是为什么?

最佳答案

添加元素后,您需要将处理程序重新绑定(bind)到它或使用 jQuery 的 on() 函数。

您需要delegate the event到页面中最近的静态祖先元素(另请参见“Understanding Event Delegation ”)。这仅仅意味着,绑定(bind)事件处理程序的元素在绑定(bind)处理程序时必须已经存在,因此对于动态生成的元素,您必须允许事件冒泡并进一步处理它。

用这个

 // instead of document you can use any parent element selector which is static(does not appended)
$(document).on("click","label",(function(e) {
var item = e.target.id;
item = item.replace("_", "");
$("#" + item).remove();
e.target.remove();
});

关于javascript - 为什么我的 jQuery 不适用于通过 ajax 加载的元素?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/27978448/

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com