javascript - Chrome/jQuery 未捕获范围错误 : Maximum call stack size exceeded

Question

我在 chrome 上收到错误“Uncaught RangeError:超出最大调用堆栈大小”。这是我的 jQuery 函数

$('td').click(function () {
        if ($(this).context.id != null && $(this).context.id != '') {
            foo($('#docId').val(), $(this).attr('id'));
        }
        return false;
    });

请注意，页面中有数万个单元格。然而，我通常将堆栈溢出与递归联系起来，在这种情况下，据我所知，没有堆栈溢出。

创建这样的 lambda 是否会自动在堆栈上生成大量内容？有什么办法解决吗？

目前，我唯一的解决方法是在渲染 HTML 时在每个单元格上显式生成 onclick 事件，这会使 HTML 变得更大。

Answer 1

由于“页面中有数以万计的单元格”，将点击事件绑定(bind)到每个单元格将导致严重的性能问题。有一个更好的方法来做到这一点，即将点击事件绑定(bind)到主体，然后找出单元格元素是否是点击的目标。像这样:

$('body').click(function(e){
       var Elem = e.target;
       if (Elem.nodeName=='td'){
           //.... your business goes here....
           // remember to replace $(this) with $(Elem)
       }
})

此方法不仅可以使用 native “td”标记完成您的任务，还可以使用稍后附加的“td”完成您的任务。我想您会对这篇关于 event binding & delegate 的文章感兴趣

<小时/>

或者你可以简单地使用 jQuery 的“.on() ”方法，效果相同:

$('body').on('click', 'td', function(){
        ...
});