事件不处理通过ajax添加的块。
事件不处理通过ajax添加的块。
提问于 2022-04-10 19:41:45
我和js一起用的是胸腺。
<form class="row" id="testamentExecutor">
<div id="executorsSection" class="form-row">
<div th:insert="fragments/executor :: executor" th:remove="tag" />
</div>
<div id="executorSectionAdd" class="deleteButton">
<a href="#" class="link-primary" id="addExecutor">Add</a>
</div>
</form>框架/执行者守则
单击addExecutor上的事件允许添加另一组executorSection。AlternativeExecutor部分包含在executorSection中，但它是隐藏的。
<script type="text/javascript" th:inline="javascript">
$(document).ready(function() {
$(".delete-executor").on('click', function (e) {
e.preventDefault();
$(this).parent().parent().remove();
});
$("#addExecutor").on('click', function (e) {
e.preventDefault();
$.ajax({
url: "/executor",
success: function (data) {
$("#executorsSection").append(data);
$("#executorSection, #executorSectionAdd, .deleteButton").removeClass('visually-hidden');
let nbExecutor = $('.executorSection').length;
if (nbExecutor == 2) {
$("#executorSectionAdd").addClass('visually-hidden');
}
},
error: function (XMLHttpRequest, textStatus, errorThrown) {
}
});
});
});
</script>当我添加另一个执行器时，它的事件(delete-executor、addAlternativeExecutor、delete-alternative- executor )不适用于它们
回答 2
Stack Overflow用户
回答已采纳
发布于 2022-04-10 20:14:41
当您调用$(".delete-executor").on('click'时，您是在当前存在的元素上调用它。
稍后添加另一个.delete-executor不会自动将事件添加到该新元素。
但是，您可以将其改为$("#executorsSection").on('click', '.delete-executor'。现在事件发生在容器上，而不是元素本身上。
Stack Overflow用户
发布于 2022-04-10 20:10:27
如果要在事件侦听器定义之后向DOM添加新元素，则事件侦听器将无法处理新添加的元素。
在定义监听器时，您只能将事件侦听器添加到DOM中已经存在的元素中。
每次向DOM添加新元素时，都必须向其附加一个新的事件侦听器(如果需要的话)。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/71819983
复制相关文章
相似问题
腾讯云开发者
