jquery - Bootstrap 5 模态窗口阻止 preventDefault() 事件在第二次发送时起作用

Question

我正在使用 jquery 3 和 bootstrap 5，我有一个问题，当 X 事件第一次正常工作并阻止发送表单时通过链接打开窗口模式时，当关闭窗口并重新打开 X 事件时它没有'不工作，没有达到警报。

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>

我的链接

<a href="./list" id="openModal" class="btn btn-light">Open Modal</a>

我的功能打开模态

$('#openModal').on('click', function (e) {
e.preventDefault();

$('#modal').modal('show').find('.modal-body').load($(this).attr('href'));

});

我的模态

<!-- Modal -->
    <div class="modal fade" id="modal" tabindex="-1">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-headerx position-relative">
                    <span class="position-absolute top-0 start-100 translate-middle badge border border-light rounded-circle bg-danger p-2"><span class="visually-hidden">unread messages</span></span></div>
                <div class="modal-body">

                </div>
            </div>
        </div>
    </div>

我的内容形式

 <form id="ajax" action="./"  method="post" enctype="multipart/form-data">
      <button type="submit" id="send" class="btn">Create</button>
     </form>

我的功能与形式

   $("#ajax").submit(function (event) {
    event.preventDefault();

    alert('preventDefault is working');

});

事件 preventDefault 仅在我第一次打开窗口时打开，第二次不起作用

标签： jquery