为什么这个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中抛出一个错误？

回答

相关问题