Recursion working in Chrome/Firefox but not IE7

I'm not sure why this is never completing in IE7, but does in the other browsers. I've put an alert just after the if (i < l) and it fires once in IE7 but doesn't continue after that. Any clue?

// i, l, object, array, tr, table all determined up here.
function iterate(i, callback) {
    if (i < l) {
        tr = buildTableRow(object[array[i]]);
        tr.attr({
            "id": 'theObjectIs' + array[i]
        });
        table.append(tr);
        i = i + 1;
        iterate(i, callback);
    } else 开发者_开发问答{
        callback();
    }
}

iterate(0, function() {
    alert("Draw Complete");
});

Sorry, can't see any reason for recursion here. Ordinary loop should work just fine:

for (var i = 0; i < array.length; i++) {
    tr = buildTableRow(object[array[i]]);
    tr.attr({
        "id": 'theObjectIs' + array[i];
    });
    table.append(tr);
}
alert("Draw Complete");

For the record, you can check the value of l in your origianl code (alert?) most probably it's equal to 1 and that's why the function was executed only once.

Edit: the code can break with error in any line inside the loop/recursion thus explaining the problem. Detect such problem using such code:

if (i < l) {
    try {
        tr = buildTableRow(object[array[i]]);
        tr.attr({
            "id": 'theObjectIs' + array[i]
        });
        table.append(tr);
    } catch (ex) {
        alert("error occurred at index " + i);
    }
    i = i + 1;
    iterate(i, callback);
} else {
    callback();
}

The performance of that recursion is going to be horrible by always updating the DOM with each iteration. If you want to be faster minimize the amount of repaints.

You want to be appending the the tbody and not the table element.