Ajax调用页面，按钮不触发带有表单变量的模态窗口

Question

我有以下Ajax 调用，它试图以特定间隔获取一些数据

$(document).ready(function() {
  x();

  function x() {
    var FD = new FormData($('form')[0]);

    $.ajax({
      type: "POST",
      url: "qaVtagAjax.php",
      processData: false,
      contentType: false,
      data: FD,
      success: function(result) {
        $("#inputFieldDisplay").html(result);
      }
    });
    return false;
  }
  setInterval(x, 5000);

});

$("#assignQaOa").click(function() {
  //            trigger modal
});

Ajax调用页面qaVtagAjax.php的内容如下

echo '<form method="post"> <div class="card" style="position: relative; border-color: black; !important ">
<div class="card-body">
    <div class="row">
        <input type="text" name= "srNum" id="srNum" value = "someValue" hidden>
        <div class="col-sm"><button class="btn-primary modalButton" type="submit" name = "assignQaOa" id = "assignQaOa" title="Click to assign to some operator">Assign</button></div>
    </div>
    </div>
</div>
</form>
<br>';

如您所见，form 中有一个button，名为assignQaOa。我想通过点击前面显示的这个按钮来触发一个模式窗口

$("#assignQaOa").click(function() {
  //trigger modal by doing Eg: $('#myModal').modal('show');
  alert("Modal window showing");
});

作为第一步，我尝试提醒一些消息。但是当我点击按钮时什么都没有发生。有人知道为什么会这样吗？

注意：实际的qaVtagAjax.php 文件包含更多html 和php 内容。这些工作正常。所以我简化了代码来理解问题。

编辑 1

以下是我从bootstrap使用的模态代码

<!-- Modal -->
<div class="modal fade" id="exampleModalCenter" tabindex="-1" role="dialog" aria-labelledby="exampleModalCenterTitle" aria-hidden="true">
  <div class="modal-dialog modal-dialog-centered" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="exampleModalLongTitle">Modal title</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">
         <input type="text" id="tagSerial" name="tagSerial" hidden>
        ...
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Save changes</button>
      </div>
    </div>
  </div>
</div>

我还根据建议编辑了下面的按钮点击代码。这一次，如果我发出一个简单的警报，它就会起作用。但是模态没有显示

$(document).on("click", "#assignQaOa", function() {
  //Alert is working. Eg: alert("some message");
  $('#exampleModalCenter').modal('show'); //This is not working
});

编辑 2

一些帖子暗示在文档中输入了两次bootstrap.js 的可能性。但就我而言，情况并非如此。我只输入了一次，我使用如下

<script src="https://code.jquery.com/jquery-3.5.1.js" integrity="sha256-QWo7LDvxbWT2tbbQ97B53yJnYU3WhH/C8ycbRAkjPDc=" crossorigin="anonymous"></script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>

<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>

有人知道为什么会这样吗？正如我在 cmets 中提到的，如果我从模态中删除了 fade 类，那么模态将在瞬间显示此 $('#exampleModalCenter').modal('show'); 代码

编辑 3 通过e.preventDefault()，我可以停止表单提交并成功显示模式。但现在我在模态窗口中有一个元素，它应该从表单提交中获取一些 $_POST 值。在这种情况下，如何在模态中获得 $_POST 值？我的Javascript 代码如下

$(document).on("click", "#assignQaOa", function(e) {
  $('#exampleModalCenter').modal('show');
  $('#tagSerial').val($("#srNum").val());
  e.preventDefault();
});

以下是模态窗口中的元素

<input type="text" id="tagSerial">

Answer 1

经过多次试验和错误，我发现问题是由于我使用type = submit 来代替button。当我更改type = button 时，模态触发并正确显示。但我仍然很困惑为什么当我使用type = submit 并删除类fade 时，模态显示一瞬间。可能也有一种解决方法可以正确显示它。我希望堆栈溢出的一些专家可以找出并告诉我问题。

无论如何，我仍然无法在我的场景中使用此type = button，因为我需要在单击此按钮时从表单提交中获取值。如果使用type = button，我无法通过$_POST方法提交和获取表单的值。

编辑 1

在得到堆栈溢出成员@Swati 的帮助后，意识到提交会刷新页面，这就是为什么在使用提交时，模态仅显示一瞬间。在她的帮助下，我修改了如下代码并能够解决我的问题

$(document).on("click", "#assignQaOa", function(e) {
  $('#exampleModalCenter').modal('show');
  var sr = $(this).closest(".card-body").find("input[name='srNum']").val();
  $('#tagSerial').val(sr);
  e.preventDefault();
});

以上代码将停止表单提交。它还将抓取输入字段srNum 的值并在模式中显示它，即使没有提交表单。