使用 jQuery 的 IE 7“停止运行此脚本”错误

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 元素，然后使用 DOM .appendChild() 方法将元素附加到 HTML。

由于您是在页面加载时执行代码，因此 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 并不总是像 for 那样有效。

作为旁注，您的脚本中有一个错误，您在其中添加 '})' 以关闭 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>';

但我认为这不会解决问题。还是值得一试的。