Почему эта функция jQuery выдает ошибку в IE8-9?

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);
  }
}

Может кто-нибудь увидеть, что может быть причиной ошибки? Если нет, есть ли у вас какие-либо предложения о том, как отлаживать JavaScript в IE?

PS Похоже, виновники не являются функциями setVersionSelectors() или setTableWidth(), поскольку они вызываются при инициализации страницы и не выдают ошибок в этот момент.

Спасибо!

Answer 1

Используйте инструменты разработчика IE (в меню Сервис или F12) для отладки в IE.

Я проверил и обнаружил, что в приведенном выше коде переменная "fontCookie" имеет значение NaN, поэтому возникают проблемы при попытке установить для размера шрифта значение, которое не является числом. Эта строка

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

необходимо изучить, чтобы понять, почему переменная не заполняется так, как вы ожидаете в IE. Возможно, вам нужна логика по умолчанию для заданного числа для посетителей, у которых нет файла cookie.

Answer 2

попробуйте переключить .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());