Question

我正在尝试从大型大型html表（MVC Razor视图）中删除所有额外空格作为IE9大型表错误修复，以便它在IE9浏览器上正确显示，下面是一个示例代码：

  var response_html =$('#section1').html();
       response_html = response_html.replace(/td>\s+<td/g,'td><td'); 
        response_html = response_html.replace(/tr>\s+<tr/g,'tr><tr'); 
        $('#section1').html(response_html);

但是在运行这段代码之后，所有以前在表格单元格中添加的DOM事件（datepicker，checkboxes，textbox events）根本不起作用。你能帮我解决这个问题吗？

提前致谢。
MIK

Answer 1

当您为主元素更改.innerHTML时（.html(x)执行此操作），将重新创建该主元素的所有子DOM元素。因此，您对这些元素的任何事件处理程序现在都已消失，因为事件处理程序附加到的原始DOM元素已被丢弃。

你基本上有三个选择来解决这个问题：

请勿更改.innerHTML。而是逐步添加，删除或修改单个DOM元素，以便不重新创建不需要更改的大量DOM元素。
在重新创建DOM元素后，在新的DOM元素上重新创建事件处理程序。
对未自行重新创建的父元素使用委派事件处理。这样，事件处理程序实际附加到的元素永远不会重新创建，因此事件处理程序也不会丢失。

在您的具体情况下，您似乎只是删除<td>和<tr>标记之间的空白区域。首先，我会问你为什么这样做。您是否认为它实际上对页面渲染方式有所影响？

以下是有关如何进行委派事件处理的一些参考资料：

jQuery .live() vs .on() method for adding a click event after loading dynamic html

Does jQuery.on() work for elements that are added after the event handler is created?

在DOM操作之后，Jquery DOM附加事件不起作用

1 个答案: