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：
我在這里發布了一個小提琴（感謝Rocket Hazmat創建了它） http://jsfiddle.net/vrnqA/2/ 。 在這個小提琴中，當我們單擊圖像時，列表會展開和折疊。 它在IE中發生的方式相同，但在Firefox中卻不相同。 它與jQuery版本有關嗎？ （由於我是jQuery的新手，因此我在谷歌搜索ho來更新版本，但是，如果有人遇到過此類問題，請告訴我，因為它會帶來很大的幫助）

編輯2：
將jQuery升級到1.9.1並沒有幫助。 問題仍然存在。

編輯3： “事件”在FireFox中似乎引起了問題。 當我在js中放置類似於alert('event: '+event)的警報時，我能夠在IE中正確看到警報，但是在FirerFox中，此警報沒有出現。 因此，似乎該事件在FireFox中未被識別。

編輯4：
剛剛在我朋友的建議下下載了螢火蟲，但顯示錯誤：

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才能發現錯誤。 對標記的形成有很大的依賴性（請參閱討論注釋中的小提琴，以了解有關此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>

剛剛糾正了這個！ 看起來太幼稚，但實際上是通過許多jsp的輸入來動態生成HTML代碼的，因此花了一些時間來解決問題。
他們首先告訴我代碼在IE中可以正常運行，但是當我檢查它時卻沒有！ 然后他們告訴我他們的IE正在兼容模式下運行。 是的，在兼容模式下，IE避免了這些錯誤，但在正常模式下並未避免。.修改后，它可以在所有瀏覽器中正常運行！