0

i'm using the DOMSubtreeModified for listening to class change in my code:

$(document).ready(function(){
    var $window = $(window),
        $body   = $("body"),
        $footer = $("#footer");

    $("#header.main p, #container").click(function(){
        $("#cat.main").toggleClass("open");
        $("#container").toggleClass("rotate");
        if (!$("#container").hasClass("rotate")) {
            $("#container").removeAttr("class");
        }
    });

    function resize() {
        if($body.height() < $window.height()){
            $footer.addClass("fixed");
        } else {
            $footer.removeAttr("class");
        }
        $('#cat.main').bind('DOMSubtreeModified propertychange', function(e) {
            if ($("#cat.main").hasClass("open")) {
                $footer.removeAttr("class");
            } else {
                $footer.addClass("fixed");
        }
        });
    }
    $window
        .resize(resize)
        .trigger("resize");
});

and just notice that is not working in chrome! what's the alternative to DOMSubtreeModified?

to be clear i want something to work at least in ie9 too.

BIGsmall
  • 13
  • 4
  • 1
    [Mutation events](https://developer.mozilla.org/en-US/docs/Web/Guide/Events/Mutation_events) are deprecated, use [MutationObserver](https://developer.mozilla.org/en-US/docs/Web/API/MutationObserver) instead. [`.bind()`](http://api.jquery.com/bind/) and [`$(document).ready(...)`](https://api.jquery.com/ready/) are also deprecated since jQuery 3.0. – t.niese Apr 30 '17 at 21:45
  • @t.niese thx but mutationobserver only supported in IE11! – BIGsmall Apr 30 '17 at 21:49
  • You are attaching a new event at each call to `resize`. Why is `DOMSubtreeModified` necessary? – guest271314 Apr 30 '17 at 21:53
  • Write you code to use MutationObserver and only use Mutation events as fallback. Mutation events will be removed from the browsers and might be buggy. – t.niese Apr 30 '17 at 22:00
  • @guest271314 so what's the proper way? – BIGsmall Apr 30 '17 at 22:01
  • The `if..else` statements should achieve expected result. Define the event handler outside of `resize` function. Why would ie8 still be being used? – guest271314 Apr 30 '17 at 22:01
  • @Hamed, Microsoft dropped support for IE8 about a year ago. Why exactly do you want to support it? Do you also need to support Netscape Navigator? – tao Apr 30 '17 at 22:03
  • 1
    @AndreiGheorghiu i'm living in iran ie8 and ie9 still has users in iran. – BIGsmall Apr 30 '17 at 22:07
  • @guest271314 thx. – BIGsmall Apr 30 '17 at 22:08
  • IE8 doesn't support mutation event either, so all that will gain is support for IE9+iE10. – yezzz Apr 30 '17 at 22:08
  • 2
    There are better ways to approach your problem: you can simply [trigger a function after toggleClass is called](http://stackoverflow.com/questions/10321393/jquery-function-on-toggleclass-complete), there is no need to setup a mutation elsewhere to listen to class changes. I would say that this is more like an X-Y problem. – Terry Apr 30 '17 at 22:09
  • Hamed, it really doesn't matter what country you are in. If a user chooses to use a browser that is no longer supported/updated by its manufacturer, they are willingly choosing to use a tool that is no longer fit for usage. They are choosing to view the pages broken. It's not your problem, it's theirs. Tell them you are respecting web standards and they should address their complaints about web-pages not being rendered correctly to Microsoft. – tao Apr 30 '17 at 22:10
  • @AndreiGheorghiu i'm agree with you but it's not like that, when they look at a broken/not working page they always think problem is from the page it self not the browser... – BIGsmall Apr 30 '17 at 22:15
  • well, if you have to have mutation stuff, use MutationObserver and see if you can get it working on older browsers with this old, deprecated polyfill: https://github.com/polymer/MutationObservers – yezzz Apr 30 '17 at 22:43

1 Answers1

0

Thanks for your posting. In my experience , it is not related to Browser. I think this code is not working in other browsers too. Regarding to DOMSubtreeModified function, please check if "#cat.main" exists or created by AJax or something. This function will be running when this element exists on this page already.

Dev Expert
  • 36
  • 5