IE 7 "stop running this script" error using jQuery

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.