У меня есть действие отправки, для обработки которого требуется некоторое время, поэтому я добавил событие onclick для кнопки отправки, которое выполняет несколько действий, например, изменяет цвет кнопки путем добавления / удаления классов css, вставляет значок счетчика, предупредить пользователя о том, что что-то происходит (не продолжайте нажимать!) Хотя это очень хорошо работает на Chrome, Edge, Firefox, et c., на Safari изменения не действуют.
Итак, я вижу в инструментах разработчика, что изменения делаются в разметке (классы переключены, добавлен элемент), но на странице ничего не меняется. Более конкретно, при тестировании в Мохаве я вижу добавленное, но не изменение цвета, при тестировании в Каталине никаких изменений не видно на странице.
function confirmUnlink(element, supplierIndex) {
const cancelButton = document.querySelector("button.cancel-unlink");
element.classList.remove("red");
element.classList.add("grey");
element.insertAdjacentHTML('beforeend', '<i class="spinner"></i>');
element.disabled = "true";
cancelButton.disabled = "true";
document.querySelector('#supplier-unlink-index').value = supplierIndex;
document.querySelector("#selectaccount-form").submit();
}
<button type="button" id="confirm-@supplier.SupplierIndex" onclick="confirmUnlink(this, '@supplier.SupplierIndex')" name="unlinkSupplierIndex" value="@supplier.SupplierIndex" class="columns five confirm-unlink red">@Model.EditableContent.UnlinkConfirmButtonText</button>
<button type="button" id="cancel-@supplier.SupplierIndex" onclick="cancelUnlink('@supplier.SupplierIndex')" class="columns five offset-by-two cancel-unlink">@Model.EditableContent.UnlinkCancelButtonText</button>