크롬/j쿼리 탐지되지 않은 범위 오류: 최대 호출 스택 크기를 초과했습니다.

크롬/j쿼리 탐지되지 않은 범위 오류: 최대 호출 스택 크기를 초과했습니다.

크롬에서 "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;
    });

페이지에는 수만 개의 셀이 있습니다.그러나 저는 일반적으로 스택 오버플로를 재귀와 연결하며, 이 경우에는 재귀가 없는 것으로 알고 있습니다.

이렇게 람다를 만들면 스택에서 자동으로 부하가 생성됩니까?그것을 피할 방법이 있습니까?

현재로서는 HTML을 렌더링할 때 각 셀에서 온클릭 이벤트를 명시적으로 생성하여 HTML을 훨씬 크게 만드는 것이 유일한 해결 방법입니다.

"페이지에 수만 개의 셀이 있습니다." 각 셀에 클릭 이벤트를 결합하면 심각한 성능 문제가 발생합니다.이렇게 하는 더 좋은 방법이 있습니다. 클릭 이벤트를 본문에 결합한 다음 셀 요소가 클릭의 대상인지 확인하는 것입니다.다음과 같이:

$('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(){
        ...
});

무한 루프가 있는 경우에도 이 오류가 발생할 수 있습니다.끝이 없고 재귀적인 자기 참조가 없는지 확인합니다.

제가 실수한 것이 더 많았습니다. 기본적으로 부모님이 클릭한 로그인을 클릭함으로써 루프 클릭(내 생각에는)이 발생했고, 이로 인해 최대 통화 스택 크기가 초과되었습니다.

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

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

이 문제는 제가 다른 많은 jQuery 플러그인이 있는 웹 사이트에서 jQuery Fancybox를 사용했을 때 발생했습니다.Fancybox 대신 LightBox(여기 사이트)를 사용했더니 문제가 사라졌습니다.

사용할 수 있음

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

저도 최근에 이 문제에 부딪혔습니다.저는 대화 div에서 매우 큰 테이블을 가지고 있었습니다.그것은 15,000줄 이상이었습니다..empty()가 대화상자 div에서 호출되었을 때 위의 오류가 발생했습니다.

대화 상자 정리를 호출하기 전에 큰 테이블에서 다른 모든 행을 제거한 다음 .empty()를 호출하는 우회적인 솔루션을 찾았습니다.그래도 효과가 있었던 것 같습니다.제 이전 버전의 JQuery는 그렇게 큰 요소를 처리할 수 없는 것 같습니다.

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);
    }
    });
 }

   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()<- 

값을 가져오지 않고 요소에 액세스하지 않도록 하십시오.val() 기능이 누락되어 이 문제를 쉽게 재현할 수 있었습니다.

예:

$.ajax({
    url : '/url-test',
    type : 'GET',
    data : {
        'country':$("#test_input_field")
    }

그래야 한다

$.ajax({
    url : '/url-test',
    type : 'GET',
    data : {
        'country':$("#country__c").val()
    }

언급URL : https://stackoverflow.com/questions/7658775/chrome-jquery-uncaught-rangeerror-maximum-call-stack-size-exceeded