使用jQuery IE 7“停止運行此腳本”錯誤

Question

我無法在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正常加載頁面。

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並不總是如此高效。

作為旁注，你的腳本中有一個錯誤，你在其中添加'}）'以關閉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>';

但我不認為這會消除這個問題。 還是值得一試。