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

Question

I can't seem to find what is causing this error in IE 7 works in Chrome. When loading my page in internet explorer it pops up the error "stop running this script message". Any ideas?

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

  });
}

}

I don't immediately spot any infinite loops but maybe I have been staring at it too long.

**UPDATE The problems seems to be with the accordion, once it is removed IE loads the page normally.

Answer 1

Use $("#requirementsDiv").html(reqString); instead of the .append() method.

$elem.html(string) is equivalent to elem.innerHTML = string .
$elem.append(string) first converts the string to a DOM element, then appends the elements to the HTML using the DOM .appendChild() methods.

Since you're executing the code at page load, it's very likely that the contents of the div is empty. If the div is not empty, but doesn't contain event-handlers and such, also use .html() :

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

Answer 2

One immediate place where I see room for improvement is where you are concatinating your reqString using + and +=. Don't do that, instead push each piece onto an array and then join the array on "", and then append to your doc.

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

Another place to look would be your use of $.each. Try changing it to a regular for loop as the $.each isn't always as efficient as for.

As a side note you have an error in your script where you add '})' to close out getReq.

Answer 3

It does not have to be an infinite loop, but some part of your script that takes too long.

Try to remove parts of the script until the error goes away, then you will have found the part you need to optimize.

You have two loops that should be considered first:

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

and

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

The second can be slightly optimized by using an array, if the data array is really large:

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

But I don't think that this will remove the problem. Still worth a try.