IE Causes infinite loop when child element modified

[greenleafmedia]

I have a layout with some nested elements

<div id="parent-element">
    <div class="child-element">
        Foo
    </div>
</div>

If I watch the parent and then modify the child's position, in IE 9 and 10 the child update seems to be bubbling up to the parent which fires the event again. This causes an infinite loop that results in no javascript working on the page.

$(document).ready(function () {
    $("#parent-element").attrchange({
        callback: function(e) {
            $("#parent-element > .child-element").css({
                top: "+=" + 100
            });
        }
    });
});

I've tried using the disconnect/reconnect methods and they work fine in web standards compliant browsers, but they are ignored in the older IE.

$(document).ready(function () {
    $("#parent-element").attrchange({
        callback: function(e) {
            var that = $(e.target);
            that.attrchange('disconnect');
            $("#parent-element > .child-element").css({
                top: "+=" + 100
            });
            that.attrchange('reconnect');
        }
    });
});

Any ideas on how to get IE to either not bubble up into an infinate loop or perhaps disable the event from re-firing. I think I have the disconnect/reconnect syntax correct, but maybe not.

[meetselva]

Could you try event.stopPropagation(); inside the attrchange handler?

https://developer.mozilla.org/en-US/docs/Web/API/Event/stopPropagation

[greenleafmedia]

Hmmm.. the MutationRecord that's passed into the handler doesn't seem to have the stopPropagation() method on it. Is there another event I should be able to pull out of that record?

[meetselva]

The mutation observer doesn't follow event model and so no event object.

I think the bubbling actually happens only in old browser that uses DOM mutation events (DOMAttrModified) and not the Mutation Observer. If it is true, then the callback should have the event object and we should be able to stop bubbling using event.stopPropagation();

[greenleafmedia]

Yeah, it's definitely only happening in the older versions of IE. When I print console.log(e); in both IE 9 and IE 10 I'm getting a MutationEvent object though. You're thinking I should be receiving a different event object?

[meetselva]

Could you console.log($(<element>).attrchange("getProperties")["method"])? - This should return one of the following.

propertychange DOMAttrModified Mutation Observer polling

[meetselva]

Please let me know if you had resolved this issue. Thanks!

[greenleafmedia]

Unfortunately, I had to move onto a different solution. IE was just going nuts firing off events for any attribute change on any child (including hover states).