Функция insertAfter - ошибка превышения максимального размера стека вызовов

#jquery #dynamic

#jquery #динамический

Вопрос:

Плагин 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('');

1. Подумайте о том, что делает этот код. Когда узел вставляется в DOM, он затем вставляет еще 2 узла, которые снова вызывают это событие, которое добавляет еще 2 узла, которые снова вызывают это событие….

2. Я читал, что мне пришлось использовать событие DOMNodeInserted для перемещения этих элементов, потому что они были размещены динамически. Я пытался удалить DOMNodeInserted вокруг моих вставок, но это не работает.

3. В этом случае, пожалуйста, отредактируйте вопрос, чтобы включить некоторый контекст о том, когда вы ожидаете запуска этого кода. Я уверен, что есть способ сделать то, что вам нужно, но нам нужно знать, что это такое, чтобы помочь вам

4. Проверьте, что this это только то, что вы ожидаете, затем верните false, например if ($(this).is(".dynamically_added_fields_contains")) { ..make inserts.. return false; } . Может потребоваться возвращаемое значение false, если this #billing_country_field контейнер вместо / также?

5. Я больше не могу следить. Извините. Динамические размещенные поля всегда являются их. Единственное, что мне нужно сделать, это изменить порядок полей.

Ответ №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>

1. Я читал, что мне пришлось использовать событие DOMNodeInserted для перемещения этих элементов, потому что они были размещены динамически. Я протестировал его с вашим кодом, но он не работает. Но это работает, когда я вставляю ваш код в свою консоль.

2. Тогда это потому, что они добавляются после запуска кода. Как они добавляются?

3. Это действительно проблема. Они также добавляются с помощью JS плагином WordPress.