javascript - jQuery 未捕获范围错误 : Maximum call stack size exceeded in 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，就这样......