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

时间:2011-11-01 20:52:20

标签: javascript jquery internet-explorer

我无法在Chrome浏览器中找到IE 7中导致此错误的原因。在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就会正常加载页面。

3 个答案:

答案 0 :(得分:4)

使用$("#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);

答案 1 :(得分:1)

我看到改进空间的一个直接位置是使用+和+ =来整合你的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。

答案 2 :(得分:0)

它不一定是无限循环,但是脚本的某些部分需要太长时间。

尝试删除部分脚本,直到错误消失为止,然后您将找到需要优化的部分。

您应首先考虑两个循环:

$.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>';

但我不认为这会消除这个问题。还是值得一试。