DOMSubtreeModified不会在$ .hide（）和$ .show（）上触发

Question

jsfiddle example link

Seems like jQuery $.hide() and $.show() do not modify the DOM to hide/show the element, and hence do not fire DOMSubtreeModified event. How can I capture those kind of events on any element on the DOM?

Thanks.

UPDATE: The code doesn't work on Chrome16 Ubuntu. Originally, I need to target QT browser, which is based on Webkit.

Answer 1

Your example JSFiddle works for me in Chrome 17. I believe your problem is a browser support one. I'm not sure of the exact browser support but not all browsers support the DOMSubtreeModified event. I do know that DOMSubtreeModified is not supported in IE8.

And .hide() / .show() alter the elements style attribute, adding display:none / display:(block|list-item|etc.)

Update

I recommend triggering a custom event on element you alter, then listening for that event:

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

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

Answer 2

you are correct, DOMSubtreeModified is purely for modifications so you have a few choices:

1) use DOMAttrModified which has just as bad if not worse support than DOMSubtreeModified

2) override the .hide() and .show() methods in jQuery so you can capture any calls to them and respond:

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

3) run some kind of "monitor" in a loop (eg. setInterval() ), looking at the visible children counts or something to that affect

4) re-organize the way you are thinking about the problem...

hope this helps -ck