Элемент DOM не обновлен в функции Handlers Event Handlers (SELECT/UNSELECT) ⇐ Javascript

[Anonymous]

долго боролась с тегами Select2 Select2 (Valid/Invalid), как после невыполнения тега (SELECT2: UNSELECT EVENT) Состояние элемента DOM (выбрано JQUERY), не отраженное в функции обработчика.
Контекст:
У меня есть поле SELECT2 в моей форме, в котором нет параметров , доступных в раскрывающемся спине, так как вход обслуживает для создания новых объектов с тегами SELECT2: True Параметр.
на теге выбран Ajax < /code> GET запрос выполняется, чтобы проверить, существует ли такой объект. Если это так, то тег стиль, чтобы указать его неверное состояние. Он хорошо работает при добавлении новых тегов. Однако, если я не выберет даже один тег, остальные «неверные» теги восстанавливаются по умолчанию и все стили сбрасываются.
во время отладки я обнаружил, что при выборе2: Unselect < /code> обработчики (тег уже не выбран и удален из Dom Inpector в Браузер) Ссылки на контейнер родителей на детей, которые параметры не фактические в соответствии с dom (console.log () Печать детей, имеющих класс, который на самом деле не назначен в этот момент, но был назначен ранее Select2: Unselect событие).
let invalidTags = new Set();

function validateCustomTag() {
var tags = $("#serials-form").find("li.select2-selection__choice");

tags.each(function () {
const tag = $(this); // Get the current tag element
const serialNumber = tag.attr("title");

// Proceed with AJAX validation
$.ajax({
type: "GET",
url: SERIAL_NUMBER_VALIDATION_URL,
data: { serial_number: serialNumber },
dataType: "json",
success: function (data) {
const response = data.response;

if (!response.valid) {
// Add the invalid serial number to the Set
invalidTags.add(serialNumber);

// Append error message
const errorElement = `[*]${response.error}`;
$("#snAjaxErrors").removeClass("d-none");
$("#snAjaxErrors").append(errorElement);

}
},
});
});
}

function applyInvalidStyles() {
invalidTags.forEach((sn) => {
const select2FieldContainer = $("#serials-form")
let tag = select2FieldContainer.find(`li[title=${sn}]`)
tag.addClass("bg-danger bg-opacity-50 text-light");
});
}

$(document).ready(function () {
$("#id_serial_numbers").on("select2:select", function () {
validateCustomTag();
applyInvalidStyles();
});

$("#id_serial_numbers").on("select2:unselect", function () {
// Reapply invalid styles after any redraw
applyInvalidStyles();
});
)};


Подробнее здесь: https://stackoverflow.com/questions/793 ... t-function