Question

我有一个动态加载表的页面。我想检查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" });
    });
});

Answer 1

如果我理解正确，你就是在试图监听表格本身的变化，这意味着内部的html更改，添加的行等等。

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

从jQuery关于change事件的文档中，找到了here：

此活动仅限于元素，框和元素。对于选择框，复选框和单选按钮，当用户进行选择时，会立即触发该事件鼠标，但对于其他元素类型，事件将延迟到元素失去了焦点。

它第一次运作的原因是，当然，你没有将它包装在change事件中;当准备好的功能触发时，它会立即触发。你的选择器工作正常，当然，桌子根本不会触发你正在寻找的事件。

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

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

希望有所帮助。

修改

您也可以使用MutationObserver，其文档可以找到here，以及在SO here上使用它的相当好的示例。在SO示例中，海报表明他们早在IE 7上就在浏览器上进行了测试，但根据this，MutationObserver本身并不是100％兼容（也许他使用的是polyfill），所以确保你正确测试。

Answer 2

使用document.ready

包装更改功能

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

Answer 3

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

jQuery watch div

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

捕获动态更新表中的更改

3 个答案: