javascript - Chrome/jQuery שגיאת RangeError לא נתפסה: גודל ערמת הקריאות המקסימלית הוצף

אני מקבל את השגיאה "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;
    });

שים לב שיש עשרות אלפי תאים בעמוד. עם זאת, בדרך כלל אני מקשר קריסת זיכרון עם רקורסיה ובמקרה הזה, למיטב ידיעתי, אין כזו.

האם יצירת למבדה כזו יוצרת אוטומטית המון דברים על ה-stack? האם יש דרך לעקוף את זה?

כרגע הפתרון היחיד שברשותי הוא ליצור את אירועי ה-onclick באופן מפורש על כל תא בזמן הצגת ה-HTML, מה שהופך את ה-HTML להרבה יותר גדול.

תשובה #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" שהתווספה מאוחר יותר. אני חושב שתתעניין במאמר הזה על חיבור אירועים ומנדט

או שאתה יכול פשוט להשתמש בשיטה ".on()" של jQuery עם אותו אפקט:

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

תשובה #2

אתה יכול גם לקבל שגיאה זו כאשר יש לך לולאה אינסופית. ודא שאין לך הפניות עצמית רקורסיביות אינסופיות.