DOM完全更改后如何重新附加事件绑定[重复]

Question

我在一个 C# Razor 网站上工作，我正在从一个 boostrap 模式发布，然后返回一个新的视图和模型。要使用响应重新加载整个页面，我在此代码块中使用以下行。

$("html").html(响应);

 function addDevice(e) {
        e.preventDefault();
        var ID = $("#txtNewDeviceID").val();
        var Name = $("#txtNewDeviceName").val();

        $.post('@Url.Action("AddDevice", "Devices")', { 'DeviceID': ID, 'DeviceName': Name }, function (response) {
            $('#newDeviceModal').modal('hide');
            $("html").html(response);
            AttachBindings();
        });
    }

这是 AttachBindings() 背后的代码：

function AttachBindings() {
        $(document).on('click', 'table tr', {}, tableClick);
        $(document).on('keyup', '#search', {}, search);
        $(document).on('click', '#btnAdd', {}, function (e) {
            addDevice(e);
        });
        $(document).on('click', '#btnRemove', {}, function (e) {
            removeDevice(e);
        });
        $(document).on('click', '#btnUpdate', {}, function (e) {
            updateDevice(e);
        });
    }

不幸的是 AttachBindings() 从未被命中，我似乎无法找到重新附加这些事件的方法。唯一似乎有效的事件是附加到#search 的keyup。有关如何解决此问题的任何想法？

Answer 1

尝试使用 live 函数并在 document.ready 上调用它

根据LIVE 的文档中提供的详细信息：

描述：为所有匹配的元素附加一个事件处理程序 当前选择器，现在和将来。

因此，即使稍后在 DOM 中添加一个元素，该事件也会由该元素触发

而对于ON，它只会被添加到当前元素中：

描述：为一个或多个事件附加一个事件处理函数 到选定的元素。

因此，在文档准备好后调用一次并使用 bind 或 live 绑定事件将为您带来魔力。

Answer 2

今天早上我检查了两次，事件正在按照我的方式进行。真正的问题是，如果 DOM 已更新，我在页面上的引导模式将不起作用。看来我需要重新连接 data-toggle 和 data-dismiss 事件。我猜引导程序会在页面首次加载时在后台执行此操作。

根据 JQuery 文档，不推荐使用 .Live 方法。

从 jQuery 1.7 开始，不推荐使用 .live() 方法。使用 .on() 附加事件 > 处理程序。旧版本 jQuery 的用户应该优先使用 .delegate() >to .live()。

另外，AttachBindings 也不需要多次调用。我的代码更新现在看起来像这样：

function addDevice(e) {
        e.preventDefault();
        var ID = $("#txtNewDeviceID").val();
        var Name = $("#txtNewDeviceName").val();

        $.post('@Url.Action("AddDevice", "Devices")', { 'DeviceID': ID, 'DeviceName': Name }, function (response) {
            $('#newDeviceModal').modal('hide');
            $("html").html(response);
        });
    }