爲什麼jQuery在Chrome中的Sharepoint 2010網站上工作，但不是IE？

Question

我有一個包含此代碼的Sharepoint 2010 webpart內的txt文件，它可以在Chrome中正常工作，但不在IE 11中。我點擊我的「li」元素並在Chrome中發生動畫，但在IE中沒有任何反應。我試圖在Sharepoint Designer中將此標籤添加到網站，但它沒有幫助：meta http-equiv =「X-UA-Compatible」content =「IE = Edge」。有誰知道什麼可以解決這個問題？

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> 
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script> <!-- color change animator --> 


<script type="text/javascript"> 

$(document).ready(function(){ 

$("li").click(function(){ 
$("li").animate({backgroundColor:"#F5F5F5"}, "fast"); 
$("li").css("color", "#676767"); 
$(this).animate({backgroundColor:"#3A7CD2"}, "fast"); 
$(this).css("color", "#FFFFFF"); 
$("#RightContentsContainer").slideUp(300); 
$("#RightContentsContainer").show("slide", { direction: "left", easing: 'swing'}, 600);  
}); 

$("#ListItem1").click(function(){$("#GuildCategoryHeader").hide().html("AFM").fadeIn(500);}); 
$("#ListItem2").click(function(){$("#GuildCategoryHeader").hide().html("ASA").fadeIn(500);}); 
$("#ListItem3").click(function(){$("#GuildCategoryHeader").hide().html("Chicago IA/Teamsters").fadeIn(500);}); 
$("#ListItem4").click(function(){$("#GuildCategoryHeader").hide().html("Commercials").fadeIn(500);}); 
$("#ListItem5").click(function(){$("#GuildCategoryHeader").hide().html("DGA").fadeIn(500);}); 
$("#ListItem6").click(function(){$("#GuildCategoryHeader").hide().html("Dues").fadeIn(500);}); 
$("#ListItem7").click(function(){$("#GuildCategoryHeader").hide().html("Hollywood Basic Crafts").fadeIn(500);}); 
$("#ListItem8").click(function(){$("#GuildCategoryHeader").hide().html("Hollywood IA").fadeIn(500);}); 
$("#ListItem9").click(function(){$("#GuildCategoryHeader").hide().html("Labor Contracts").fadeIn(500);}); 
$("#ListItem10").click(function(){$("#GuildCategoryHeader").hide().html("Other Unions").fadeIn(500);}); 
$("#ListItem11").click(function(){$("#GuildCategoryHeader").hide().html("National IA").fadeIn(500);}); 
$("#ListItem12").click(function(){$("#GuildCategoryHeader").hide().html("New York IA/Teamsters").fadeIn(500);}); 
$("#ListItem13").click(function(){$("#GuildCategoryHeader").hide().html("Non-Affiliate").fadeIn(500);}); 
$("#ListItem14").click(function(){$("#GuildCategoryHeader").hide().html("Non-Union").fadeIn(500);}); 
$("#ListItem15").click(function(){$("#GuildCategoryHeader").hide().html("SAG-AFTRA").fadeIn(500);}); 
$("#ListItem16").click(function(){$("#GuildCategoryHeader").hide().html("San Francisco").fadeIn(500);}); 
$("#ListItem17").click(function(){$("#GuildCategoryHeader").hide().html("Studio-Specific Contracts").fadeIn(500);}); 
$("#ListItem18").click(function(){$("#GuildCategoryHeader").hide().html("WGA").fadeIn(500);}); 
}); 
</script> 

<style type="text/css"> 

a li{text-decoration: none;color:#676767;} 

#guildlinesDiv{border: 2px solid #5A7EAD !important;} 
#FAQDiv{border: 2px solid #5A7EAD !important;} 
#headlinesDiv{border: 2px solid #5A7EAD !important;} 
#contractsDiv{border: 2px solid #5A7EAD !important;} 
#archivesDiv{border: 2px solid #5A7EAD !important;} 

#ListItem1{background-color:#3A7CD2;color:#FFFFFF;} 
#ListItem2{background-color:#F6F8FE;} 
#ListItem3{background-color:#F6F8FE;} 
#ListItem4{background-color:#F6F8FE;} 
#ListItem5{background-color:#F6F8FE;} 
#ListItem6{background-color:#F6F8FE;} 
#ListItem7{background-color:#F6F8FE;} 
#ListItem8{background-color:#F6F8FE;} 

</style> 

<div id="LeftHandAbsoluteMenuContainer" style="position: relative; top: 0px; left:15px; height:380px; width:290px "> 
<img src="https://epwork.ep.corp/bu/legal/private/LaborRelations/Images1/DropDownArrow.png" style="position: absolute; top: 7px; left:18px; height:28px;width:28px; z-index: 1;"/> 
<p style="position: absolute; top: 9px; left:76px; z-index: 1; font-size: 17px;">Select Category</p> 
<ul style="position: absolute; top: 41px; left:-18px; width: 245px; z-index: 1; font-size: 14px; list-style-type: none;"> 

<a style="text-decoration:none;" href="#"><li id="ListItem1">AFM</li></a> 
<a style="text-decoration:none;" href="#"><li id="ListItem2">ASA</li></a> 
<a style="text-decoration:none;" href="#"><li id="ListItem3">Chicago IA/Teamsters</li></a> 
<a style="text-decoration:none;" href="#"><li id="ListItem4">Commercials</li></a> 
<a style="text-decoration:none;" href="#"><li id="ListItem5">DGA</li></a> 
<a style="text-decoration:none;" href="#"><li id="ListItem6">Dues</li></a> 
<a style="text-decoration:none;" href="#"><li id="ListItem7">Hollywood Basic Crafts</li></a> 
<a style="text-decoration:none;" href="#"><li id="ListItem8">Hollywood IA</li></a> 
<a style="text-decoration:none;" href="#"><li id="ListItem9">Labor Contracts</li></a> 
<a style="text-decoration:none;" href="#"><li id="ListItem10">Other Unions</li></a> 
<a style="text-decoration:none;" href="#"><li id="ListItem11">National IA</li></a> 
<a style="text-decoration:none;" href="#"><li id="ListItem12">New York IA/Teamsters</li></a> 
<a style="text-decoration:none;" href="#"><li id="ListItem13">Non-Affiliate</li></a> 
<a style="text-decoration:none;" href="#"><li id="ListItem14">Non-Union</li></a> 
<a style="text-decoration:none;" href="#"><li id="ListItem15">SAG-AFTRA</li></a> 
<a style="text-decoration:none;" href="#"><li id="ListItem16">San Francisco</li></a> 
<a style="text-decoration:none;" href="#"><li id="ListItem17">Studio-Specific Contracts</li></a> 
<a style="text-decoration:none;" href="#"><li id="ListItem18">WGA</li></a> 

</ul> 
<img src="https://epwork.ep.corp/bu/legal/private/LaborRelations/Images1/CurvedCornerRectangle.png" style="position: relative; top: 0x; left:0px; height:41px;width:290px;"/> 
<img src="https://epwork.ep.corp/bu/legal/private/LaborRelations/Images1/CurvedCornerSquare.png" style="position: relative; top: 0px; left:0px; height:332px;width:290px;"/> 
</div> 


<p style="position: absolute; left:335px; top:118px; width:505px; font-size: 14px;">This site is designed to provide access to Labor Contracts and Payroll Guidelines. We are always looking for ways to provide better tools to facilitate our work. Please send any suggestions to <a href="mailto: RPucher@ep.com?Subject=Labor%20Relations%20site%20suggestions">Bob Pucher</a>.</p> 
<p id="GuildCategoryHeader" style="position: absolute; left:352px; top:182px; width:445px; font-size: 14px; font-weight:bold;text-align:center;color:#215582">AFM</p> 


<div id="RightContentsContainer" style="position: absolute; left:342px;top:216px; height: 310px;" > 
<div id="contractsDiv" style="float: left; height:116px; margin-left:10px; text-align: center;"> 
<div style="height:24px; font-size: 16px; margin-top: 2px;color:#215582;">Contracts</div> 
<img style="margin-top: -2px;" src="/bu/legal/private/LaborRelations/Images1/contract.jpg" alt=""/> 
</div> 
<div id="guildlinesDiv" style="float: left; height:116px; margin-left:20px; text-align: center;"> 
<div style="height:24px; font-size: 16px; margin-top: 2px; color:#215582;">Guidelines</div> 
<img style="margin-top: -2px;" src="/bu/legal/private/LaborRelations/Images1/guidelines.jpg" alt=""/> 
</div> 
<div id="archivesDiv" style="float: left; height:116px; margin-left:20px; text-align: center;"> 
<div style="height:24px; font-size: 16px; margin-top: 2px;color:#215582;">Archives</div> 
<img style="margin-top: -2px;" src="/bu/legal/private/LaborRelations/Images1/archive.jpg" alt=""/> 
</div> 

Answer 1

首先，在所有的，在SharePoint頁面上，使用一個簡單的「禮」選擇可能是一個壞主意。你可以用一個類或一個id來更多地選擇你的選擇器。其次，我更喜歡使用.on（「click」，「li」，function（）{}）而不是.click（）。我有更好的經驗。你可以試試看。

的更多信息： http://api.jquery.com/on/

Answer 2

我用jQuery的以下版本作爲我的代碼首先聲明，並得到了一切工作：

https://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js

我猜IE不喜歡Jquery的版本3.1.1