DOMSubtreeModified 不会在 $.hide() 和 $.show() 上触发答案

【问题标题】：DOMSubtreeModified doesn't fire on $.hide() and $.show()DOMSubtreeModified 不会在 $.hide() 和 $.show() 上触发
【发布时间】：2012-02-28 19:09:44
【问题描述】：

jsfiddle example link

似乎 jQuery $.hide() 和 $.show() 不会修改 DOM 来隐藏/显示元素，因此不会触发 DOMSubtreeModified 事件。如何在 DOM 上的任何元素上捕获此类事件？

谢谢。

更新： 该代码不适用于 Chrome16 Ubuntu。本来我需要定位基于Webkit的QT浏览器。

【问题讨论】：

标签： javascript jquery dom javascript-events

【解决方案1】：

你是对的，DOMSubtreeModified 纯粹是为了修改所以你有几个选择：

1) 使用DOMAttrModified，它的支持与DOMSubtreeModified 一样糟糕，甚至更差

2) 覆盖 jQuery 中的 .hide() 和 .show() 方法，以便您可以捕获对它们的任何调用并响应：

var oldShow = $.fn.show;
$.fn.show = function(args) {
    alert('showing!');
    oldShow.apply(this, arguments);
};
// do the same for .hide()

3) 在循环中运行某种“监视器”（例如setInterval()），查看可见的子项计数或其他影响

4) 重新组织你思考问题的方式...

希望这有助于 -ck

【讨论】：

【解决方案2】：

您的示例 JSFiddle 在 Chrome 17 中适用于我。我相信您的问题是浏览器支持问题。我不确定确切的浏览器支持，但并非所有浏览器都支持DOMSubtreeModified 事件。我知道 IE8 不支持 DOMSubtreeModified。

和.hide()/.show()改变元素style属性，添加display:none/display:(block|list-item|etc.)

更新

我建议在您更改的元素上触发自定义事件，然后监听该事件：

//register event handler
$(document).on('customDOMAltered', function (event) {
    console.log(event.target);
});

//alter DOM element
$('#some-element').hide().trigger('customDOMAltered');

【讨论】：

我知道它确实修改了样式属性，但是由于某种原因，它在 chrome 16 ubuntu 上不起作用...最初，我需要支持基于 webkit 的 QT 浏览器。
@shershams 我建议您在更改元素时触发自定义事件，然后监听您的自定义事件，这将适用于所有浏览器。
它肯定会工作，但问题是，我正在编写一个插件代码来检查第三方代码。他们应该遵循一些政策，如果他们不遵守，我将需要执行。我无法控制他们的代码，但我可以检查他们在 DOM 更改时显示的内容。