insertAfter 函数 - 超出最大调用堆栈大小错误答案

【问题标题】：insertAfter function - Maximum call stack size exceeded errorinsertAfter 函数 - 超出最大调用堆栈大小错误
【发布时间】：2021-01-21 08:02:36
【问题描述】：

Wordpress 插件使用 Javascript动态放置多个元素。

<div id="billing_address_1_field">address</div>
<div id="billing_country_field">country</div>
<div id="billing_postcode_field">postcode</div>
<div id="billing_city_field">city</div>

所以我添加了以下 jQuery 代码来更改元素的顺序：

(function($){

    $("body").bind("DOMNodeInserted", function() {

        //move before country fields
        $(this).find('#billing_postcode_field').insertBefore('#billing_country_field');
        $(this).find('#billing_city_field').insertBefore('#billing_country_field');
    });
})(jQuery);

邮政编码和城市元素应该在#billing_country_field之前。

当我转到该特定网页时，我会无限循环此错误： Maximum call stack size exceeded error

预期结果：

<div id="billing_address_1_field">address</div>
<div id="billing_postcode_field">postcode</div>
<div id="billing_city_field">city</div>
<div id="billing_country_field">country</div>

因为元素是动态放置的，所以我不能这样做：

$('body').find('#billing_postcode_field').insertBefore('');

【问题讨论】：

想想这段代码在做什么。当一个节点插入到 DOM 中时，它会插入另外 2 个节点，这会再次引发此事件，这会添加另外 2 个节点，这会再次引发此事件....
我读到我必须使用 DOMNodeInserted 事件来移动这些元素，因为它们是动态放置的。我试图删除我的插入周围的 DOMNodeInserted 但这不起作用。
在这种情况下，请编辑问题以包含有关您希望此代码何时运行的一些上下文。我确信有一种方法可以满足您的要求，但我们需要知道那是什么才能帮助您
检查this 是否只是您所期望的，然后返回false，例如if ($(this).is(".dynamically_added_fields_contains")) { ..make inserts.. return false; }。如果this 是#billing_country_field 容器，它可能需要返回false？
我不能再关注了。对不起。动态放置的字段始终是他们的。我唯一需要做的就是移动字段的顺序。

标签： jquery dynamic

【解决方案1】：

我不确定你为什么要使用事件DOMNodeInserted，但你仍然可以做你想做的事：

(function($) {
  $("body").find('#billing_postcode_field').insertBefore('#billing_country_field');
  $("body").find('#billing_city_field').insertBefore('#billing_country_field');
})(jQuery);

(function($) {
  $("body").find('#billing_postcode_field').insertBefore('#billing_country_field');
  $("body").find('#billing_city_field').insertBefore('#billing_country_field');
})(jQuery);

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="billing_address_1_field">add</div>
<div id="billing_country_field">country</div>
<div id="billing_postcode_field">postcode</div>
<div id="billing_city_field">city</div>

【讨论】：

我读到我必须使用 DOMNodeInserted 事件来移动这些元素，因为它们是动态放置的。我已经用你的代码测试了它，但它不起作用。但是当我将你的代码粘贴到我的控制台时它会起作用。
然后是因为它们是在代码运行后添加的。它们是如何添加的？
确实是这个问题。它们还通过 Wordpress 插件与 JS 一起添加。