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 code：

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：
我在这里发布了一个小提琴（感谢Rocket Hazmat创建它）http://jsfiddle.net/vrnqA/2/。在这个小提琴中，当我们点击图像时，列表会展开并折叠。它在IE中发生的方式相同，但在Firefox中却没有。这是与jQuery版本相关的问题吗？（因为我是jQuery的新手，我正在谷歌搜索ho以更新版本，但是，如果有人遇到任何此类问题，请告诉我，因为它会有很大帮助）

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

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

编辑4：
刚刚在我的朋友的建议下下载了firebug，它显示错误：

ReferenceError：未定义事件

任何指针？

编辑5
嗨朋友们，真的感谢所有的支持。问题不在于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）上都能正常使用。

Answer 2

非常感谢所有人的支持。这个问题不是jQuery，而是UI开发团队使用我的代码......必须分析他们的UI以发现错误....查询搜索具有ul的li。标签的形成存在很大的依赖性（请参阅讨论评论中的小提琴，以了解有关此jQuery中标签依赖性的更多信息）。分析了他们的代码并最终解决了....感谢您的支持和对不起告诉您所有人迟到，如果我无意中浪费了某人的时间，我深感遗憾。将来会更加迅速。

说明：
为了形成树，UI开发人员意外地形成了像这样的代码

<ul id="expList">
    <li>test</li>
        <ul>
            <li>one</li>
            <li>two</li>
        </ul>    
</ul>

而不是

<ul id="expList">
    <li>test
        <ul>
            <li>one</li>
            <li>two</li>
        </ul>
    </li>
</ul>

刚刚更正了!!它似乎太天真了，但HTML代码实际上是动态生成的，许多jsp提供了输入，因此我花了很长时间才能找到解决方案。
他们首先告诉我代码在IE中正常运行，但是当我检查它时，它并没有！然后他们告诉我他们的IE在兼容模式下运行。是的，在兼容模式下，IE避免了这些错误但在正常模式下没有避免它们。修改后，它在所有浏览器中正常运行!!

jquery只在IE中工作，而不是在firefox上使用chrome

2 个答案: