jQuery - IE9 issues (works once debugger was opened )

Question

I have a one page site, and im using the following code for scrolling between the pages:

function gotoPage() {
        var cur = $(this);
        var role = cur.attr('role');
        var target = $('#' + role);

        $('html,body').animate({
          scrollTop: target.offset().top - 94
        }, 1000);
    }

$('.navBt').click(gotoPage);

HTML:

<div class="navBt" role="topSpacing">
    <img src="img/nav_campaign.png" />
</div>

<div class="navBt" role="sectionD">
    <img src="img/nav_club.png" />
</div>

It works perfectly on any browser except IE. When i open it on IE9 (not sure about other versions) it wouldnt work, but once i press F12 to open the inspection, it would start working normally from that point, even if i refresh the page or enter the page again without the inspection opened.

Any ideas why?

What do you think `this` represents? It's `gotoPage()`, not a DOM element as you seem to be thinking. So `$(this)` wraps the function itself, which has no `role` attribute. I think this code just can't work as you intend it to. — Jeremy Thille, Mar 05 '15 at 10:42
@JeremyThille Without knowing the exact usage of `gotoPage` your assumptions about the value of `this` are useless :) It could be `window`, or a DOM node if `gotoPage` is used as a event handler, or the surrounding object, or whatever has been set via `.apply()`, `.call()`, `.bind()`, `.proxy()`, ... - http://stackoverflow.com/questions/3127429/how-does-the-this-keyword-work — Andreas, Mar 05 '15 at 10:53
edited, i dont think thats the issue :) it works fine on any other browser. unless i missunderstood you, i have added the invoker and the HTML. — Guy Aston, Mar 05 '15 at 10:57
That is right, but I only have what the OP gave us. So I assume it's just a function, as there is absolutely nothing else in the code. If it was a method of an object, the syntax would be : `gotoPage : function(){...}` so it's not referencing the object it's part of. In any case, it's not a DOM element. — Jeremy Thille, Mar 05 '15 at 11:00

score 1 · Accepted Answer · answered Mar 05 '15 at 11:23

this sounds very much like a problem i had a long time ago (with IE only):
are you using console somewhere in your javascript code? most likely a console.log() ?

then you have got a problem because on IE browsers the console javascript object doesn't exist until you have opened the development console. so there will be some javascript error (which you can't see cause your console isn't open) which stops the execution of the rest of your javascript code.

this is the workaround I found:

if (!window.console) window.console = {};
if (!window.console.log) window.console.log = function () { };

just put this at the top of your javascript code.
this will create a pseudo console object and the pseudo method log, so the errors don't occur with your console closed.

jQuery - IE9 issues (works once debugger was opened )

1 Answers1