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和Android for Chrome） IE9 ，32位和64位版本。

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

event.type已成功登录到控制台（“LOG：click”），但是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 });

jsFiddle

另外，请确保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}}（更新1）。

IE9中使用jQuery没有响应（）

3 个答案: