捕获动态更新表中的更改

Catch changes in dynamicly updated tables

本文关键字：动态 更新      更新时间：2023-09-26

我有一个动态加载表格的页面。我想检查是否有任何td包含关键字，并根据该关键字更改一些 CSS 样式。

第一次加载时一切正常，但是当表中的某些内容发生变化时，我的函数不会被触发。

这是我的代码。第一个块效果很好，但第二个块就不行了？

 $( document ).ready(function() {
        $("tr td:contains('*')").each(function(){
            $(this).parent("tr").css({ "background-color": "red" });
            $(this).parent().children().css({ "background": "inherit" });
        });
    });
jQuery('body').on('change', '.content', function () {
    $("tr td:contains('*')").each(function(){
        $(this).parent("tr").css({ "background-color": "red" });
        $(this).parent().children().css({ "background": "inherit" });
    });
});

如果我理解正确，您正在尝试侦听表本身的更改，这意味着内部 html 更改、添加的行等。

不幸的是，您没有看到change事件触发的原因是，该事件仅在元素value更改时触发;表、行和单元格没有这样的属性。

来自jQuery关于更改事件的文档，可在此处找到：

此事件仅限于元素、框和 元素。对于选择框、复选框和单选按钮， 当用户使用 鼠标，但对于其他元素类型，事件将延迟到 元素失去焦点。

它第一次工作的原因是，当然，你没有把它包装在change事件中;当你的就绪函数触发时，它会立即触发。您的选择器工作正常，当然，表永远不会触发您要查找的事件。

我自己没有亲自做过这件事，但是在这里可以看到在SO上找到的一种解决方案，它涉及设置一种不断检查是否有任何更改的轮询器。它还说明了如何设置可以触发的自定义事件，从而进一步将代码分成可管理的部分。

显然，他们还讨论了使用 jqGrid，其中有一个您可能还想考虑的刷新事件。

希望有帮助。

编辑

你也可以使用 MutationObserver ，其文档可以在这里找到，以及它在这里在 SO 上使用的一个很好的例子。在 SO 示例中，海报表明他们早在 IE 7 的浏览器上就对其进行了测试，但是根据这一点，MutationObserver本身并不是 100% 兼容的(也许他使用了 polyfill(，因此请确保您正确测试它。

使用 document.ready 包装更改时函数

$(function(){
/*code*/
});

感谢大家的帮助，我在这里找到了使用自定义构建插件的解决方案：

jQuery watchdiv

它对我来说就像一个魅力！

相关文章：