jQuery Uncaught RangeError：在Google Chrome中超出了最大調用堆棧大小

Question

我有看起來像這樣的代碼：

jQuery('.views-row').each(function(){
    if(jQuery(this).find('.views-field-field-doctor-indicator').length != 0) {
        jQuery(this).css("padding","0px");
        jQuery('.views-field-title span a', this).css("color","#00476b");
        jQuery('.views-field', this).wrapAll('<div class="physician-indicator"></div>');
    } 
});

但是意識到，由於頁面中存在一些Ajax，因此在用戶按下Enter鍵進行搜索后，它將無法繼續工作。 您基本上可以看到它的作用，但為了更人性化地對其進行解釋，它基本上用於對醫生進行分類並為所需的屬性添加某些屬性。

我嘗試使用此：

jQuery('#block-views-homepage-redo-block').bind('DOMNodeInserted', function(){
    var target = jQuery(this);
    jQuery('.views-row', target).each(function(){
        if(jQuery(this).find('.views-field-field-doctor-indicator').length != 0) {
            jQuery(this).css("padding","0px");
            jQuery('.views-field-title span a', this).css("color","#00476b");
            jQuery('.views-field', this).wrapAll('<div class="physician-indicator"></div>');
        } 
    });
});

在我看來，這非常相似，只是每當內容更改時它就會做同樣的事情。 但是，我得到這個錯誤：

jQuery Uncaught RangeError: Maximum call stack size exceeded

我了解錯誤在大多數情況下意味着什么，但我不了解在中斷頁面方面有何大不同。

-編輯-

這對我有用。 我添加了另一個簽入，以查看div是否已創建。 這樣一來，代碼就可以跨過所有我首先需要創建的div內容。

jQuery('#block-views-homepage-doctors-redo-block').bind('DOMNodeInserted', function(){
    var target = jQuery(this);
    jQuery('.views-row', target).each(function(){
        var switchTarget = jQuery(this);
        if(!switchTarget.children().hasClass('physician-indicator')) {
            if(jQuery(switchTarget).find('.views-field-field-doctor-indicator').length != 0) {
                jQuery(switchTarget).css("padding","0px");
                jQuery('.views-field-title span a', switchTarget).css("color","#00476b");
                jQuery('.views-field', switchTarget).wrapAll('<div class="physician-indicator"></div>');
            } 
        }
    });
});

Answer 1

每次插入元素時都會插入一個元素，因此它基本上是一個無窮循環，它會插入元素，並填滿調用堆棧。

它是wrapAll觸發DOMNodeInserted ，並觸發另一個wrapAll ，觸發另一個DOMNodeInserted ，所以它繼續...

Answer 2

這可能有點晚了，上面的答案使我找到了所需的答案，但萬一有人需要，它還會給出更多的答案。

在上面的更新示例中，您可能會使用“一個”而不是“綁定”，而不是在每個塊中都包含一個檢查。

jQuery('#block-views-homepage-doctors-redo-block').one('DOMNodeInserted', function(){
var target = jQuery(this);
jQuery('.views-row', target).each(function(){
    if(jQuery(this).find('.views-field-field-doctor-indicator').length != 0) {
        jQuery(this).css("padding","0px");
        jQuery('.views-field-title span a', this).css("color","#00476b");
        jQuery('.views-field', this).wrapAll('<div class="physician-indicator"></div>');
    } 
});

}）;

這樣，它只會觸發一次，並且不會導致堆棧溢出錯誤。 現在，也許您希望它在用戶每次搜索時觸發。 我建議在觸發搜索時添加單個（使用“ one”）事件處理程序。