Question

我正在构建一个开源网络应用程序，用于浏览古代文档以进行在线发布（在http://ocp.tyndale.ca/testament-of-abraham中执行）。它包括一个函数，通过动态插入<div>向文本显示添加新列。（通过单击右边缘的灰色圆圈并在其上加上白色加号来触发该功能。）

这适用于除IE（甚至8和9）之外的所有浏览器，它会抛出错误。因为IE没有像firebug那样的东西，所以我很想知道导致错误的原因。（我不是一个受过专业训练的程序员也没有帮助 - 我是一名多年来一直在零碎地挑选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()，因为这些函数在页面初始化时被调用，并且不会在此时抛出错误。

谢谢！

Answer 1

尝试将.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());

Answer 2

使用IE Developer Tools（在Tools菜单或F12下）在IE中进行调试。

我检查过并发现在上面的代码中，“fontCookie”变量设置为NaN，因此在尝试将font-size设置为非数字的值时会导致问题。这一行

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

需要进行调查，以了解为什么变量没有按照您在IE中的预期填充。对于没有cookie的访问者，您可能需要逻辑默认为设定的数字。

为什么这个jQuery函数在IE8-9中抛出错误？

2 个答案: