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>';正如你所看到的，有一个button名为. 我想通过单击此按钮来触发模式窗口，如前所示formassignQaOa$("#assignQaOa").click(function() {  //trigger modal by doing Eg: $('#myModal').modal('show');  alert("Modal window showing");});第一步，我尝试提醒一些消息。但当我点击按钮时什么也没有发生。有谁知道为什么会这样？注意：实际qaVtagAjax.php文件有更多html和 php 内容。这些工作正常。所以我简化了代码以理解问题。

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值并将其显示在模式中。