javascript - jquery 仅在 IE 中工作，不适用于 Chrome 上的 Firefox

Question

我正在使用 jQuery 设计一个可扩展列表(我是 jQuery 的新手)。可扩展列表在 IE 上运行良好，但在 Firefox/Chrome 上运行不正常。

在调试时，我发现对于 firefox/chrome，我能够得到 alert('hiiii prepare ORIGINAL')，但之后什么也没有。更多调试表明 function(event) 没有被执行。

代码哪里出错了？这不是我完全准备的代码，而是从网上获得的，并根据我的目的进行了修改。原始代码归功于其作者。

我使用的是 Firefox 版本 20.0.1 和 IE 版本 9，jQuery 版本 1.4.2。

js代码:

function prepareList() {
    alert('hiiii prepare ORIGINAL');
    $('#expList').find('li:has(ul)').click(function (event) {
        alert('inside');
        if(this == event.target) {
            $(this).toggleClass('expanded');
            $(this).children('ul').toggle('medium');
        }
        //return false;
    }).addClass('collapsed').children('ul').hide();

    //Create the button functionality
    $('#expandList').unbind('click').click(function () {
        $('.collapsed').addClass('expanded');
        $('.collapsed').children().show('medium');
    })
    $('#collapseList').unbind('click').click(function () {
        $('.collapsed').removeClass('expanded');
        $('.collapsed').children().hide('medium');
    })
    // alert('END prepare ORIGINAL');  
};

$(document).ready(function () {
    prepareList();
});

CSS:

#expList ul, li {
    list-style: none;
    margin:0;
    padding:0;
    cursor: pointer;
}
#expList p {
    margin:0;
    display:block;
}
#expList p:hover {
    background-color:#121212;
}
#expList li {
    line-height:140%;
    text-indent:0px;
    background-position: 1px 8px;
    padding-left: 20px;
    background-repeat: no-repeat;
}

/* Collapsed state for list element */
#expList .collapsed {
    background-image: url(../../tree/img/collapsed.png);
}
/* Expanded state for list element
/* NOTE: This class must be located UNDER the collapsed one */
#expList .expanded {
    background-image: url(../../tree/img/expanded.png);
}
#expList {
    clear: both;
}

编辑 1:
我在这里发布了一个 fiddle (感谢 Rocket Hazmat 创建它)http://jsfiddle.net/vrnqA/2/ .在这个 fiddle 中，当我们单击图像时，列表会展开和折叠。它在 IE 中以相同的方式发生，但在 Firefox 中则不同。这是与 jQuery 版本相关的问题吗？ (因为我是 jQuery 的新手，我正在谷歌搜索以学习如何更新版本，但是，如果有人遇到过任何此类问题，请告诉我，因为这会有很大帮助)

编辑 2:
将 jQuery 升级到 1.9.1 没有帮助。问题仍然存在。

编辑 3:“事件”似乎导致了 FireFox 中的问题。当我在 js 中放置类似 alert('event: '+event) 的警报时，我能够在 IE 中正确看到警报，但在 FirerFox 中，此警报没有出现。因此，FireFox 似乎无法识别该事件。

编辑 4:
刚刚在我 friend 的建议下下载了 firebug，它显示错误:

ReferenceError: event is not defined

有什么指点吗？

编辑 5
嗨 friend 们，真的很感谢大家的支持。问题不在于 jQuery，而在于使用我的代码的 UI 开发团队……必须分析他们的 UI 才能找出错误……非常感谢所有支持……

Answer 1

我不知道你是否修复了它，但我对 JSFiddle 做了一些更改，这是我的版本:http://jsfiddle.net/vrnqA/3/

我删除了“事件”的使用，因为这似乎是您遇到问题的原因。

这是修改后的 prepareList 函数:

$('#expList').find('li:has(ul)').click(function() {
        $(this).toggleClass('expanded');
        $(this).children('ul').toggle('medium');
}).addClass('collapsed').children('ul').hide();

$('#expandList').click(function() {
    $('.collapsed').addClass('expanded').children().show('medium');
});
$('#collapseList').click(function() {
    $('.collapsed').removeClass('expanded').children().hide('medium');
});

我在 Firefox、Chrome 和 Safari(都在 Mac 上)中运行良好。