我无法在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就会正常加载页面。
答案 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>';
但我不认为这会消除这个问题。还是值得一试。