爲什麼這個jQuery函數在IE8-9中拋出一個錯誤？

我正在構建一個開源網絡應用程序，用於在線發佈古代文檔（在http://ocp.tyndale.ca/testament-of-abraham的行動中）。它包含一個功能，通過動態插入<div>將新列添加到文本顯示中。（該功能是通過單擊右側空白處的灰色圓圈並帶有白色加號來觸發的。）爲什麼這個jQuery函數在IE8-9中拋出一個錯誤？

這適用於除IE（甚至8和9）以外的所有瀏覽器，它會在其中引發一個錯誤。由於沒有像IE的螢火蟲，我有一段時間搞清楚是什麼導致錯誤。（這對我不是一個受過專業訓練的程序員毫無幫助 - 我是一位學者，多年來一直在嘗試JavaScript）。這裏的功能似乎會導致問題：

function addVersion(){ 
    //count the current columns 
    var versionCount = $('.versionColumn').size(); 
    //make sure there are not too many columns for the window width 
    if(versionCount > 5){ 
    alert('Sorry, the maximum number of columns is already open!'); 
    } 
    //insert another column 
    else{ 
    var oldMax = $('.versionColumn:last').attr('id'); 
    oldMax = oldMax.substr(1,1); 
    newMax = parseInt(oldMax)+1; 
    $('.versionColumn#v'+oldMax).after('<div id="v'+newMax+'" class="versionColumn"><div class="versionHeader"><form><select class="versionSelector"></select></form><a class="versionCloserLink" href="#" title="Click to close this language version"></a></div><div id="c'+newMax+'" class="containerCell"><div id="tt'+newMax+'-1" class="textType"><div id="n'+newMax+'-1" class="msNavRow"><form><select class="msSelector"></select></form><a href="#" class="msCloser" title="Click top close this text type"></a></div><div id="dd'+newMax+'-1" class="msDisplayRow"><img src="sites/all/modules/bookDisplay/images/ajax-loader.gif" /><div class="textScroller" id="ts'+newMax+'-1"></div></div><div id="h'+newMax+'-1" class="textHandle"></div></div><div class="textAdder"><a class="textAdderLink" href="#" title="Click to add another text type"></a></div></div><div id="a'+newMax+'" class="apparatusCell"><div id="ah'+newMax+'" class="apparatusHandle"></div><table class="apparatusTable"><tr class="apparatusHeaderRow"><th class="apparatusHeader"><span>Text Types</span></th><th class="apparatusHeader"><span>Reading</span> <a class="apparatusToggle">X</a></th></tr></table><span class="apparatusLabel">Click on a section of blue text to view available textual variants for those words.</span></div></div>'); 
    setVersionSelectors(); 
    setTableWidth(); 
    var fontCookie = parseInt($.cookie('text_size')); 
    $('#v'+newMax+' .textScroller').css('font-size', fontCookie); 
    } 
}

任何人都可以看到什麼可能會導致錯誤？如果沒有，你有任何關於如何在IE中調試JavaScript的建議嗎？

PS罪魁禍首似乎不是setVersionSelectors()或setTableWidth()的函數，因爲這些函數是在頁面初始化時調用的，並且不會在此時拋出錯誤。

謝謝！

來源

2011-03-31 monotasker

我相信IE瀏覽器有開發工具，如果你按f12;） – Hacknightly 2011-03-31 17:46:19

IE8和IE9確實有開發工具（只需按F12頁）。在他們中間，有一個'控制檯'選項卡，其中記錄了錯誤。這可能有幫助。（在控制檯顯示錯誤之前，您可能需要刷新頁面） – skarmats 2011-03-31 17:47:36

該錯誤似乎來自setVersionSelectors（）（您可以通過查看Developer Tools中的callstack找到）。但在此之後，所有投注都關閉。嘗試切換到不同的jQuery版本，看它是否改變任何東西。 1.5.1，1.5.2RC想起 – skarmats 2011-03-31 17:53:06

嘗試切換.size()至.length反正這是首選的方法。，你有沒有嘗試過更直接的克隆？

$('.versionColumn:last').clone().attr('id','v'+($('.versionColumn).length+1)).appendTo('#parentElementIDOrSelectorHere');

或（！未經測試）

$('.versionColumn:last').clone().attr('id','v'+($('.versionColumn).length+1)).appendTo($(this).parent());

來源

2011-03-31 17:49:22 FatherStorm

謝謝@FatherStorm。我做了這兩個改變 - 將.size（）切換到.length並使用.clone（） - 它現在似乎在ie8中工作。我不確定哪一種改變會造成不同，但我從來不會想到任何一種。再次感謝！ – monotasker 2011-04-01 16:31:12

使用IE開發者工具（在工具菜單，或F12）在IE調試。

我檢查並發現，在上面的代碼中，「fontCookie」變量被設置爲NaN，所以在嘗試將字體大小設置爲非數字值時會導致問題。這條線

var fontCookie = parseInt($.cookie('text_size'));

需要調查，看看爲什麼變量沒有得到填充，因爲你期望在IE瀏覽器。也許你需要邏輯來爲沒有cookie的訪問者默認設置數字。

來源

2011-03-31 18:03:56 Shawn

這不會導致錯誤，但它是我需要調試的東西。感謝您的支持！ – monotasker 2011-04-01 16:33:00

爲什麼這個jQuery函數在IE8-9中拋出一個錯誤？

回答

相關問題