IE 7 jQueryを使用して「このスクリプトの実行を停止する」エラー

Question

IE 7でこのエラーの原因となっているものがChromeで動作していないようです。インターネットエクスプローラで私のページを読み込むと、 "このスクリプトメッセージの実行を停止する"というエラーが表示されます。何か案は？

$(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:"} 
    }); 

    }); 
} 

}

私はすぐに任意の無限ループを発見しませんが、多分私はあまりにも長い間、それを見つめてきました。

** UPDATE 問題はアコーディオンと思われます。一度除去されるとIEはページを正常に読み込みます。

Answer 1

無限ループである必要はありませんが、スクリプトの長すぎる部分があります。

エラーがなくなるまでスクリプトの一部を削除しようとすると、最適化する必要がある部分が見つかります。

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

しかし、これで問題が解決されるとは思われません。まだ試してみる価値があります。

Answer 2

改善の余地がある場所は、+と+ =を使用してreqStringをconcatinatingする場所です。それをしないで、代わりに各部分を配列に押し込み、配列を ""上に結合してから、文書に追加してください。

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("")); 

もう1つの場所は$ .eachの使用です。 $ .eachがいつものように効率的ではないので、それを通常のforループに変更してみてください。

getReqを閉じるために '}）'を追加するスクリプトにエラーがあります。

Answer 3

.append()の代わりに$("#requirementsDiv").html(reqString);を使用してください。

$elem.html(string)は、elem.innerHTML = stringに相当します。
$elem.append(string)は最初に文字列をDOM要素に変換し、DOM .appendChild()メソッドを使用してHTMLに要素を追加します。

ページロード時にコードを実行しているので、divの内容が空である可能性が非常に高いです。 div要素が空ではなく、イベント・ハンドラなどが含まれていない場合、また.html()を使用します。

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