Ajax 带按钮的调用页面不触发模态 window 带表单变量

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。如前所述，我想通过单击此按钮来触发模式 window

$("#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

一些post建议在文档中输入两次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>

有谁知道为什么会这样？正如我在评论中提到的，如果我从模态中删除了 class fade，那么模态将使用此 $('#exampleModalCenter').modal('show'); 代码

显示一瞬间

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

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

下面是模态中的元素window

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

Answer 1

经过多次尝试和错误后，我发现问题是由于我将 type = submit 用于 button。当我更改 type = button 时，模态触发并正确显示。但是我还是很纳闷为什么我用了type = submit去掉了classfade，模态一瞬间就显示出来了。可能也有解决方法可以正确显示它。我希望stack overflow的一些专家能找出问题并告诉我。

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

编辑 1

得到stack overflow成员@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 值并在模式中显示它，即使没有提交表单。

Ajax 带按钮的调用页面不触发模态 window 带表单变量

Ajax called page with button not triggering modal window with form variable

php

ajax

jquery

bootstrap-modal