IE 7 «прекратить запускать этот скрипт» ошибка с использованием jQuery

Question

Я не могу найти причину этой ошибки в IE 7 работает в Chrome.При загрузке моей страницы в Internet Explorer выдается сообщение об ошибке «прекратить запуск этого скрипта».Есть идеи?

 $(document).ready(function() {
    var icons = {
    header: "ui-icon-circle-plus",
    headerSelected: "ui-icon-circle-minus"
    };  

   $('.ui-accordion').accordion({
   active: false,
   collapsible: true,
   autoHeight: false,
   icons: icons
   });

   $("a").click(function (event) {
    event.stopPropagation();
   });

   $('.requirementCheckBox').click(function() {
     getReq();
   });
 });


function getReq() {

  var componentList;
  var selected = $(":checkbox:checked");

  if(selected.length ==0){
    $('#requirements_table_wrapper').remove();
  }

  else {
    $.each(selected , function(i, n){

    if(i == 0){
      componentList = n.value;
    }
    else{
      componentList += ',' + n.value;
    }
 });


$.getJSON("addRequirements/GetRequirements/?componentList=" + componentList, function    (data) {

  $('#requirements_table_wrapper').remove();

    var reqString = '<table id="requirements_table"><thead><tr><th>Requirement ID</th><th>Requirements</th><th>Reference</th></tr></thead><tbody>';

    for (var i = 0; i < data.length; i++) {
      reqString += '<tr><td>'+ data[i].reqID  + '</td><td>' + data[i].reqText + '</td>' + '<td>' + data[i].reqReference + '</td></tr>';
    }

    reqString += '</tbody></table>';

    $("#requirementsDiv").append(reqString);

    $("#requirements_table").dataTable({
        "bJQueryUI": true,
        "bPaginate": false,
        "bRetrieve": true,
    "oLanguage": {"sSearch" : "Filter Requirements:"}
    });

  });
}

}

Я не сразу замечаю бесконечные петли, но, возможно, я слишком долго на них смотрю.

** ОБНОВЛЕНИЕ Проблемыкажется, что с гармошкой, как только она удалена, IE загружает страницу нормально.

Answer 1

Используйте $("#requirementsDiv").html(reqString); вместо .append() метода.

$elem.html(string) эквивалентно elem.innerHTML = string.$elem.append(string) сначала преобразует строку в элемент DOM, затем добавляет элементы в HTML, используя методы DOM .appendChild().

Поскольку вы выполняете код при загрузке страницы, очень вероятно, что содержимоеDiv пуст.Если div не пустой, но не содержит обработчиков событий и тому подобное, также используйте .html():

var $elem = $("#requirementsDiv");
$elem.html($elem.html() + reqString);

Answer 2

В одном из ближайших мест, где я вижу возможности для улучшения, вы объединяете свою reqString с помощью + и + =. Не делайте этого, вместо этого поместите каждый фрагмент в массив, а затем присоедините массив к «», а затем добавьте в документ.

var reqString = ['<table id="requirements_table"><thead><tr><th>Requirement ID</th><th>Requirements</th><th>Reference</th></tr></thead><tbody>'];

    for (var i = 0; i < data.length; i++) {
      reqString.push('<tr><td>', data[i].reqID, '</td><td>', data[i].reqText,'</td>','<td>', data[i].reqReference, '</td></tr>');
    }

    reqString.push('</tbody></table>');
$("#requirementsDiv").append(reqString.join(""));

Еще одно место, где стоит искать, - это использование $ .each. Попробуйте изменить его на обычный цикл for, так как $ .each не всегда так эффективен, как для.

В качестве примечания у вас есть ошибка в вашем скрипте, где вы добавляете '})', чтобы закрыть getReq.

Answer 3

Это не обязательно должен быть бесконечный цикл, но некоторая часть вашего скрипта занимает слишком много времени.

Попробуйте удалить части скрипта, пока ошибка не исчезнет, ​​тогда вы найдете частьвам нужно оптимизировать.

У вас есть два цикла, которые должны рассматриваться в первую очередь:

$.each(selected , function(i, n){

и

for (var i = 0; i < data.length; i++) {

Второй может быть немного оптимизирован с помощью массиваЕсли массив данных действительно большой:

var reqArray = ['<table id="requirements_table"><thead><tr><th>Requirement ID</th><th>Requirements</th><th>Reference</th></tr></thead><tbody>'];

for (var i = 0; i < data.length; i++) {
  var element = data[i]
  reqString.push('<tr><td>'+ element.reqID  + '</td><td>' + element.reqText + '</td>' + '<td>' + element.reqReference + '</td></tr>');
}

var regString = regArray.join('') + '</tbody></table>';

Но я не думаю, что это решит проблему.Все еще стоит попробовать.