Chrome/jQuery Uncaught RangeError：超出最大調用堆棧大小

Question

我在 chrome 上收到錯誤“Uncaught RangeError: Maximum call stack size exceeded”。 這是我的 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

由於“頁面中有數以萬計的單元格”，將點擊事件綁定到每個單元格會導致嚴重的性能問題。 有一個更好的方法來做到這一點，即將點擊事件綁定到正文，然后找出單元格元素是否是點擊的目標。 像這樣：

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

此方法不僅可以使用本機“td”標簽完成您的任務，還可以使用稍后附加的“td”。 我想你會對這篇關於事件綁定和委托的文章感興趣

---

或者你可以簡單地使用 jQuery 的“ .on() ”方法，效果相同：

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

Answer 2

當您有無限循環時，您也可能收到此錯誤。 確保您沒有任何無休止的遞歸自引用。

Answer 3

我的更像是一個錯誤，發生的事情是循環單擊（我猜）基本上是通過單擊登錄名來單擊父級也被單擊，這最終導致超出了最大調用堆棧大小。

$('.clickhere').click(function(){
   $('.login').click();
});

<li class="clickhere">
  <a href="#" class="login">login</a>
</li>

Answer 4

當我在帶有許多其他 jQuery 插件的網站中使用 jQUEry Fancybox 時，我遇到了這個問題。 當我使用 LightBox（此處為站點）而不是 Fancybox 時，問題就消失了。

Answer 5

你可以使用

  $(document).on('click','p.class',function(e){
   e.preventDefault();
      //Code 
   });

Answer 6

我最近也遇到了這個問題。 我在對話框 div 中有一個非常大的表。 它是 > 15,000 行。 當在對話框 div 上調用 .empty() 時，我收到了上面的錯誤。

我找到了一個迂回的解決方案，在我調用清理對話框之前，我會從非常大的表中刪除每隔一行，然后調用 .empty()。 不過它似乎奏效了。 看來我的舊版 JQuery 無法處理這么大的元素。

Answer 7

我收到此錯誤是因為我忘記聲明在 Ajax 數據中傳遞的變量之一。首先聲明了僅模式。

data: {
     tmp_id: tmp_id,
     mode: mode
}

還聲明了 tmp_id 變量，它工作正常。

let tmp_id=$("#tmp_id").val();
let mode=$("#mode").val();
$.ajax({
    url: 'my-url',
    method: 'post',
    data: {
     tmp_id: tmp_id,
     mode: mode
    }
    dataType: 'json',
    success: function(response) {
       console.log(response);
    }
    });
 }

Answer 8

   In My case I was html element insted of value
                          |
                          |
   var uname=$("#uname");<-
    
   let data={
     uid:uid,
     .....
   };        
    
   $.post("url",data,(responseText)=>{ 
       ..
   }).fail((xhr)=>{
       ..
   });
    
  then I updated 
                              |
                              |
  var uname=$("#uname").val()<-