Jquery Javascript只適用於Chrome和Firefox，但不適用於IE

Question

我有一個包含CSS和Jquery的HTML文件。當我在Chrome和Firefox上測試它時，它工作正常。但是當我在IE上測試它時，只有CSS部分工作，JavaScript中的點擊功能根本不起作用。

$(document).ready(function(){ 

    var prev;  
    $('svg polygon').click(function(){ 
     var current = this; 
     this.classList.add('mouseclick'); 
     $('#suburb').val(current.id); 


     if((typeof prev != 'undefined') && (current != prev)){ 
      prev.classList.remove("mouseclick"); 
     } 


     prev=current; 
    }); 

    $("#forwardbutton").click(function(){ 
     $("#ctlform").submit(); 
    }); 

}); 

svg polygon{ 
    fill:none; 
    stroke: white; 
    stroke-width:1px;  
} 

svg polygon:hover{ 
    fill: rgba(255, 255, 0, 0.3); 
} 

svg polygon.mouseclick{ 
    fill: rgba(255, 0, 4, 0.3);  !important; 
    stroke-width: 1px; 
    stroke: rgb(255, 0, 4); 
} 

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 

<form role="form" id="ctlform"> 
<div> 
<svg height="630" width="840"> 
    <image width="840" height="630" xlink:href="http://choicestudies.com/img/IGA/base.png" /> 
    <polygon points="536,379 535,377 536,374 539,368 541,367 541,363 539,363 540,359 546,362 557,362 559,358 559,359 565,358 568,359 567,363 563,368 564,382 562,386 558,386 554,390 554,392 552,392 551,395 547,397 547,399 545,398 548,392 548,386 546,385 537,386 536,379" id="Ashfield"> 
     <title>Ashfield</title> 
    </polygon> 
    <polygon points="437,360 438,358, 437,345 441,337 441,331 439,329 439,326 441,320 452,318 455,317 457,314 468,312 472,304 483,304 483,306 485,307 488,307 493,302 499,304 493,311 493,315 496,316 497,318 496,321 497,324 501,325 501,334 496,339 490,342 486,340 482,341 480,347 480,349 482,349 479,350 479,353 486,363 484,364 482,371 467,377 451,378 447,373 445,373 443,370 441,370 439,367 436,366 437,360" id="Auburn"/> 


    <polygon points="403,430 405,428 405,425 399,418 399,405 402,405 404,403 404,400 397,394 397,390 393,389 393,383 394,382 399,383 402,372 405,369 406,365 408,364 413,353 421,360 423,360 436,370 438,370 438,372 443,374 451,381 468,380 478,375 480,375 481,380 485,380 486,378 489,377 485,402 489,404 494,404 488,406 486,413 478,422 468,425 467,430 461,431 461,443 462,449 464,450 464,469 467,472 468,476 462,477 456,481 443,483 441,487 438,489 438,491 430,490 430,486 426,486 422,490 420,486 424,483 424,481 417,475 417,473 414,470 406,469 406,464 408,463 407,457 404,455 399,455 395,446 391,445 394,442 393,432 395,432 397,429 399,431 403,430" id="Bankstown"/> 

</svg> 
</div> 

<div> 
    <p>Suburb Name:</p><br /> 
    <input type="text" id="suburb" name="sub"/> 

</div> 
</form> 

解決方案：
classList.add（）不是在IE兼容。
因此，將它改爲.attr（「class」，「classname」）將解決問題。

Answer 1

由於Shan suggested，你的問題是你的classList使用;然而，jQuery cannot add a class to an SVG。你可以通過在<svg>上設置class屬性來解決這個問題。

您可以通過運行下面的代碼片段來看到這一點。

$(document).ready(function(){ 
 
\t 
 
\t var prev;  
 
\t $('svg polygon').click(function(){ 
 
\t \t var current = this; 
 
\t \t $(this).attr("class", "mouseclick"); 
 
\t \t $('#suburb').val(current.id); 
 

 
\t \t if((typeof prev != 'undefined') && (current != prev)){ 
 
\t \t \t $(prev).attr("class", ""); 
 
\t \t } 
 
\t \t \t \t  
 
\t \t prev=current; 
 
\t }); 
 

 
\t $("#forwardbutton").click(function(){ 
 
\t \t document.getElementById("ctlform").submit(); 
 
\t }); 
 

 
});

svg polygon{ 
 
\t fill:none; 
 
\t stroke: white; 
 
\t stroke-width:1px;  
 
} 
 

 
svg polygon:hover{ 
 
\t fill: rgba(255, 255, 0, 0.3); 
 
} 
 

 
svg polygon.mouseclick{ 
 
\t fill: rgba(255, 0, 4, 0.3); !important; 
 
\t stroke-width: 1px; 
 
\t stroke: rgb(255, 0, 4); 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 

 
<form role="form" id="ctlform"> 
 
<div> 
 
<svg height="630" width="840"> 
 
<image width="840" height="630" xlink:href="http://choicestudies.com/img/IGA/base.png" /> 
 
<polygon points="536,379 535,377 536,374 539,368 541,367 541,363 539,363 540,359 546,362 557,362 559,358 559,359 565,358 568,359 567,363 563,368 564,382 562,386 558,386 554,390 554,392 552,392 551,395 547,397 547,399 545,398 548,392 548,386 546,385 537,386 536,379" id="Ashfield"> 
 
    <title>Ashfield</title> 
 
</polygon> 
 
<polygon points="437,360 438,358, 437,345 441,337 441,331 439,329 439,326 441,320 452,318 455,317 457,314 468,312 472,304 483,304 483,306 485,307 488,307 493,302 499,304 493,311 493,315 496,316 497,318 496,321 497,324 501,325 501,334 496,339 490,342 486,340 482,341 480,347 480,349 482,349 479,350 479,353 486,363 484,364 482,371 467,377 451,378 447,373 445,373 443,370 441,370 439,367 436,366 437,360" id="Auburn"/> 
 

 

 
<polygon points="403,430 405,428 405,425 399,418 399,405 402,405 404,403 404,400 397,394 397,390 393,389 393,383 394,382 399,383 402,372 405,369 406,365 408,364 413,353 421,360 423,360 436,370 438,370 438,372 443,374 451,381 468,380 478,375 480,375 481,380 485,380 486,378 489,377 485,402 489,404 494,404 488,406 486,413 478,422 468,425 467,430 461,431 461,443 462,449 464,450 464,469 467,472 468,476 462,477 456,481 443,483 441,487 438,489 438,491 430,490 430,486 426,486 422,490 420,486 424,483 424,481 417,475 417,473 414,470 406,469 406,464 408,463 407,457 404,455 399,455 395,446 391,445 394,442 393,432 395,432 397,429 399,431 403,430" id="Bankstown"/> 
 

 
</svg> 
 
</div> 
 

 
<div> 
 
<p>Suburb Name:</p><br /> 
 
<input type="text" id="suburb" name="sub"/> 
 

 
</div> 
 
</form>

Answer 2

您的FF和Chrome緩存中必須有jQuery的緩存版本，因爲我沒有看到您在頁面上的任何位置包含jQuery。

添加到頁面下方BODY標籤：

<script src="//code.jquery.com/jquery-1.11.2.min.js"></script> 

編輯：

我看你現在添加它。我剛剛測試了你的代碼片段，加載了jQuery lib，它在IE11中工作。

PS - 很酷的效果！

Answer 3

我猜想這是classList的使用，只有部分支持，從IE10開始。你的開發工具 - > IE中的腳本告訴你，它應該給你一個錯誤。

此外，爲什麼你使用jQuery和本地JS。我個人討厭jquery，但使用它的一個重要原因是支持跨瀏覽器，你可以在jquery中使用類方法。

Answer 4

對不起，但我沒有看到JQuery導入<script src="//code.jquery.com/jquery-2.1.1.min.js"></script>。

注意的JQuery 2 *不能與IE瀏覽器6/7/8