如何重新初始化已从DOM中删除的按钮

How to reinitialize button that has been removed from the DOM?

本文关键字：删除 按钮 DOM 何重新 初始化      更新时间：2023-09-26

所以我在使用一个名为XCrud的程序时遇到了一个问题，该程序应该有助于数据库管理。问题的要点是，该程序删除了按钮并将其重新插入DOM，导致JQuery中的单击函数停止工作。

$('a[class="btn btn-warning xcrud-action"]').on('click', function() {
 intvId = window.setInterval(cleanup, 200);
});

该按钮应该重置一个间隔，以帮助用户了解数据库的工作流程，但如上所述，该按钮只会触发一次。

感谢大家的帮助

改为使用此语法，将事件处理程序委派给该类的所有成员，包括现在和将来：

$('parent').on('click', 'a.btn.btn-warning.xcrud-action', function() {
     intvId = window.setInterval(cleanup, 200);
});

其中parent是DOM树中比目标a元素更高的元素。（我假设使用此选择器，您的示例中的所有类都应用于单个a元素。）此语法取代了旧的delegate方法。

关键是，您将处理程序附加到一个不会来来去去的元素上（无论DOM多么不稳定，如果必须的话，您都可以使用document），并对元素应用过滤器（就选择器而言），以仅将处理程序应用于所需的包含元素的类型。正如文件所述：

委托事件的优点是，它们可以处理以后添加到文档中的子元素中的事件。通过选择在附加委托事件处理程序时保证存在的元素，可以使用委托事件来避免频繁附加和删除事件处理程序。

不幸的是，文档也未能阐明on方法的[selector]参数将处理程序委托给选择器中类的成员。您可以通过查看旧的delegate文档，并检查它们提供的从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>

任何新按钮都将具有与原始按钮相同的行为。

相关文章：