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) {&nbsp; $('#exampleModalCenter').modal('show');&nbsp; var sr = $(this).closest(".card-body").find("input[name='srNum']").val();&nbsp; $('#tagSerial').val(sr);&nbsp; e.preventDefault();});上面的代码将停止表单提交。即使不提交表单，它也会抓取输入字段srNum值并将其显示在模式中。