Question

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

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

此按钮应该重置一个区间，帮助用户沿着数据库的工作流程，但如前所述，该按钮只会触发一次。

感谢大家的帮助

Answer 1

请改用此语法，将事件处理程序委托给类，现在和将来的所有成员：

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

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

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

委托事件的优势在于它们可以处理来自稍后添加到文档的后代元素的事件。通过选择在附加委托事件处理程序时保证存在的元素，您可以使用委派事件来避免频繁附加和删除事件处理程序的需要。

不幸的是，doc也没有说明[selector]方法的on参数将处理程序委托给选择器中类的成员。您可以通过查看较旧的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>

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

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

1 个答案: