Event.preventDefault 在 JS 中无法用于表单提交

Question

// js

document.addEventListener("DOMContentLoaded", function () {
        const individualOrderForm = document.getElementById('individual-order-form');

        async function sendAjax(form) {
            try {
                const response = await fetch(form.action, {
                    method: 'POST',
                    body: new FormData(form)
                });

                const data = await response.json();

                if (data.status === "success") {
                    showToast(data.detail, "success");
                    disableForm(form);
                } else {
                    let errors = JSON.parse(data.errors);
                    let errorsText = Object.entries(errors)
                        .map(([field, errors]) => {
                            return errors.map(error => `${error.message}`).join('\n');
                        })
                        .join('\n');

                    showToast(`${data.detail}\n${errorsText}`, "danger");
                }
            } catch (error) {
                console.log(error);
                showToast(gettext("Произошла ошибка. Повторите попытку позже."), "danger");
            }
        }

        individualOrderForm.addEventListener(
            'submit',
            function (e) {
                e.preventDefault();
                sendAjax(individualOrderForm);
            },
            {passive: false}
        );
    }
);

<form id="individual-order-form"
      action="{% url 'mainpage:individual-order-negotiate' %}"
      method="POST"
      class="d-flex w-100 flex-column justify-content-start align-items-start text-start card-body">
  <fieldset class="w-100">
    <legend class="text-center">
      <h2 class="fs-4 fw-normal" id="contact-us">
        {% translate 'Свяжитесь с нами' %}
      </h2>
    </legend>
    <div class="form-text">{% translate 'Заполните форму, чтобы заказать букет из индивидуального состава.' %}</div>
    {% csrf_token %}
    <div class="mb-3 w-100">
      <label for="customerNameInput" class="form-label">{% translate 'Имя' %}</label>
      <input class="form-control text-start" id="customerNameInput" aria-describedby="nameHelp" name="first_name"
        required>
    </div>
    <div class="mb-3">
      <label for="contact-method-input" class="form-label">
        {% translate 'Тел. номер в любой соц. сети или ссылка профиля' %}
      </label>
      <div class="d-flex">
        {{ individual_order_form.contact_method }}
      </div>
    </div>
    <div class="mb-3 form-check">
      <input type="checkbox" class="form-check-input checkbox-dark" id="recallCheckbox" name="recall_me">
      <label class="form-check-label" for="recallCheckbox">
        <small>
          {% translate 'Разрешаю мне перезвонить' %}
        </small>
      </label>
    </div>
    <button class="btn btn-dark-green">{% translate 'Связаться' %}</button>
  </fieldset>
</form>

不幸的是，在 iOS 上（至少在 iOS 上），以下代码无法按预期工作：

individualOrderForm.addEventListener(
    'submit',
    function (e) {
        e.preventDefault();
        sendAjax(individualOrderForm);
    },
    { passive: false }
);

通过 POST 请求提交表单时，页面会重定向到发送 POST 请求的 URL，并且我看到返回的 JSON 对象显示在黑屏上。

但是，这在 PC 和 Android 设备上都可以完美运行。

遗憾的是，我无法解决这个问题。

我遇到了这个讨论，这似乎是一个合乎逻辑的解决方案，但不幸的是，它没有解决问题：

GitHub 讨论：React 问题 #13369。

我已经尝试清除客户端和服务器端的缓存，运行manage.pycollectstatic，并重新启动服务器，但问题仍然存在。

第二天，我进行了实验，发现如果表单中没有输入字段，只有一个提交按钮，一切都会完美运行。 为什么这可能会以一种有点不合逻辑的方式发挥作用尚不清楚。

任何帮助或指导将不胜感激。

Answer 1

问题解决了，我忘了加载带有“defer”属性的脚本