在IE9中使用jQuery on()没有响应

Question

我设置了以下jQuery（版本2.0.3）以在触摸设备和桌面上切换我的导航下拉列表：

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

我的ToggleNav()功能：

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

以及相关的 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>

这适用于我迄今为止测试过的所有浏览器（Mac，Windows和Chrome for Android），除了IE9，包括32位和64位版本。

有趣的是，如果我打开开发人员工具并刷新页面，它将开始工作，然后我可以关闭开发人员工具，无论我刷新多少次，它都会继续工作。 也就是说，直到我关闭并重新打开浏览器。

event.type已成功记录到控制台（"LOG：单击"），但 slideToggle（） 显然未被触发，并且没有错误记录到控制台。

以前有没有人遇到过这种情况，并且知道原因和/或解决方案？

更新

1：我更新了ToggleNav()功能以提醒event.type，因为打开控制台查看日志也使IE9开始工作。 IE9甚至不会显示警报，因此甚至没有触发ToggleNav（）函数。

更新2：经过更多的测试，我认为问题出在原始的on（）处理程序上。 当我将console.log("Ready handler triggered");行更改为alert()时，它开始在IE9中工作。

Answer 1

看起来您必须在 .on 事件处理程序中调用该函数。 此外，您不需要委托的 .on 事件处理程序即可正常工作，并且您不需要在此处使用 event.preventDefault();，所以我删除了它：

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

js小提琴

此外，请确保 touchstart 事件也正常工作。 如果没有，请执行与代码中click事件相同的操作。

Answer 2

有时 IE8 和 IE9 在 jQuery $时会出乎意料地表现。在 noconflict 中使用jQuery为我解决了这个问题。

Answer 3

最终以一些进一步的测试和挫败感结束了我的回答。 显然在IE中"控制台对象仅在打开开发工具栏时激活。在此之前，调用控制台对象将导致它被报告为未定义。打开工具栏后，控制台将存在（即使工具栏随后关闭），因此控制台调用将正常工作。

请参阅：https://stackoverflow.com/a/7742862/866273

因此，我的 ToggleNav 函数（原始问题）和 ready（） 处理程序（更新 2）中的console.log()都导致了这个问题，这就是为什么当我console.log()切换到 alert()（更新 1）时它开始工作的原因。