javascript - 捕获动态更新表中的更改

Question

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

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

这是我的代码。第一个 block 运行良好，但第二个 block 不行？

 $( 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" });
    });
});

Answer 1

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

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

从jQuery关于change事件的文档中，发现here :

This event is limited to elements, boxes and elements. For select boxes, checkboxes, and radio buttons, the event is fired immediately when the user makes a selection with the mouse, but for the other element types the event is deferred until the element loses focus.

它第一次起作用的原因当然是因为您没有将其包装在 change 事件中；当您的 on-ready 函数触发时，它会立即触发。当然，您的选择器工作正常，表根本不会触发您正在寻找的事件。

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

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

希望有帮助。

编辑

您也许还可以使用 MutationObserver，其文档可以在 here 找到。 ，以及它在 SO here 上的使用的一个很好的例子。在 SO 示例中，发布者表示他们在早至 IE 7 的浏览器上进行了测试，但是根据 this , MutationObserver 本身并不是 100% 兼容(也许他使用了 polyfill)，所以请确保正确测试它。