所以我在使用名为 XCrud 的程序时遇到了问题，这应该有助于数据库管理。问题的要点是该程序将其按钮删除并重新插入到 DOM 中，导致我在 JQuery 中的单击功能停止工作。
$('a[class="btn btn-warning xcrud-action"]').on('click', function() {
intvId = window.setInterval(cleanup, 200);
});
此按钮应该重置一个间隔，以帮助用户完成数据库的工作流程，但如上所述，该按钮只会触发一次。
感谢大家的帮助
最佳答案
改用此语法，将事件处理程序委托(delegate)给当前和 future 的所有类成员:
$('parent').on('click', 'a.btn.btn-warning.xcrud-action', function() {
intvId = window.setInterval(cleanup, 200);
});
其中 parent 是 DOM 树中比您所定位的 a 元素更高的元素。 (我假设使用此选择器，示例中的所有类都适用于单个 a 元素。)此语法取代了旧的 delegate 方法。
重点是，您将处理程序附加到一个不会来来去去的元素(无论您的 DOM 多么不稳定，如果需要，您始终可以使用 document) ，并对元素应用过滤器(就选择器而言)，以仅将处理程序应用于所需的包含元素的类型。作为doc状态:
Delegated events have the advantage that they can process events from descendant elements that are added to the document at a later time. By picking an element that is guaranteed to be present at the time the delegated event handler is attached, you can use delegated events to avoid the need to frequently attach and remove event handlers.
不幸的是，该文档也未能说明 on 方法的 [selector] 参数将处理程序委托(delegate)给选择器中类的成员。您可以通过查看较旧的 delegate 来找到这一点。 doc，并检查他们提供的从 delegate 转换为 on 的示例。
这是一个小例子:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>
Test
</title>
<!--jQuery and jQuery-UI files-->
<script src="includes/jquery/jquery-2.2.3.js"></script>
<script src="includes/jquery-ui/external/jquery/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function () {
$('form').on('click', 'button.test1.test2', function(e, ui){
$('form').append('<button type="button" class="test1 test2">"Test"</button>')
alert('click');
});
});
</script>
</head>
<body>
<form>
<button type="button" class="test1 test2">Test</button>
</form>
</body>
</html>
任何新按钮都将具有与原始按钮相同的行为。
关于javascript - 如何重新初始化已从 DOM 中删除的按钮？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/38529823/