jqueryinternet-explorer-9jquery-2.0

No response in IE9 using jQuery on()


I have the following jQuery (version 2.0.3) set up to toggle my nav dropdown on both touch devices and desktops:

$(document).ready(function() {
    console.log("Ready handler triggered");
    $(document).on({ click : ToggleNav, touchstart : ToggleNav }, "#NavToggle");
});

My ToggleNav() function:

ToggleNav = function(event) {
    console.log(event.type);
    $('ul#Navigation').slideToggle(200);
    event.preventDefault();
}

And the relevant HTML:

<div id='NavToggle'>Navigation</div>
<ul id='Navigation'>
    <li><a href='/' title='Home'>Home</a></li>
    <li><a href='/page-1.php' title='Page 1'>Page 1</a></li>
    <li><a href='/page-2.php' title='Page 2'>Page 2</a></li>
    <li><a href='/page-3.php' title='Page 3'>Page 3</a></li>
    <li><a href='/page-4.php' title='Page 4'>Page 4</a></li>
</ul>

This works on every browser I've tested so far (Mac, Windows, and Chrome for Android) except for IE9, both 32 and 64-bit versions.

The funny thing is that if I open Developer Tools and refresh the page it will start working, and I can then close Developer Tools and it will continue working no matter how many times I refresh. That is, until I close and reopen the browser.

The event.type is successfully logged to the console ("LOG: click"), but the slideToggle() is apparently not being triggered and no errors are being logged to the console.

Has anyone come across this before, and knows the cause and/or a solution?

Update 1: I updated the ToggleNav() function to also alert the event.type since opening the console to view the log also made IE9 start working. IE9 will not even show the alert, so the ToggleNav() function isn't even being triggered to begin with.

Update 2: After a bit more testing, I think the problem lies with the original on() handler. When I changed the console.log("Ready handler triggered"); line to be an alert() instead it started working in IE9.


Solution

  • Ended up at my answer with some further testing and frustration. Apparently in IE "the console object is only activated when the Dev Toolbar is opened. Prior to that, calling the console object will result in it being reported as undefined. After the toolbar has been opened, the console will exist (even if the toolbar is subsequently closed), so your console calls will then work."

    See: https://stackoverflow.com/a/7742862/866273

    So both the console.log() in my ToggleNav function (original question) and in the ready() handler (update 2) were causing the issue, and that's why it started working when I switched console.log() to alert() (update 1).