No response in IE9 using jQuery on()

Question

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.

Answer 1

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).

Answer 2

Looks like you have to invoke the function within the .on event handler. Furthermore you don't need a delegated .on event handler for this to work, and you don't need to use event.preventDefault(); here, so I removed it:

function ToggleNav() {
    $('ul#Navigation').slideToggle(200);
}
$("#NavToggle").on({ 
    click : function() { 
        $("ul#Navigation").slideToggle(200); 
    }, touchstart : ToggleNav });

jsFiddle

Also, be sure that the touchstart event is working properly as well. If not do the same as the click event is doing in the code.

Answer 3

Sometimes IE8 and IE9 behave unexpectedly with the $ of jQuery. Using jQuery in the noconflict has solved this issue for me.