JQuery：模态窗口内的按钮

Question

我正在尝试在模态窗口内的表格中选择一行，然后在该模态窗口内有一个按钮（'newBtn'）使用所选行的 id 向服务器发送一个发布请求。 该按钮应该在按下时发送最后一个选定行的数据，但是它发送的帖子数量与之前对一行的点击次数一样多（不仅是最后一个）。所以如果之前点击了第 1、2、3 行，它将发送 3 个帖子，而不仅仅是 1 个选择第 3 行的帖子。
我怀疑括号没有正确放置，但是当在模态函数之外使用按钮时，它根本不会触发。任何帮助都非常感谢。

var table= $('#example').DataTable();
    var tableBody = '#example tbody';
    var form = new FormData();

    $(document).ready(function() {

        $(tableBody).on('click', 'tr', function () {

            var cursor = table.row($(this));//get the clicked row
            var selected_id = cursor.data()[0];// this will give the id in the current row.

            $('#myModal').on('shown.bs.modal', function (event) {
                $("#testbutton").trigger("click");
            });


            $("#newBtn").on("click",function(){
                form.set("selected_id", selected_id);

                var settings = {
                    "url": "http://127.0.0.1:5000/test",
                    "method": "POST",
                    "timeout": 0,
                    "processData": false,
                    "mimeType": "multipart/form-data",
                    "contentType": false,
                    "data": form
                };

                $.ajax(settings).done(function (response) {
                    console.log(response);
                });

            });

        });

    });

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="myModal" class="modal fade" role="dialog">
  <div class="modal-dialog" style="min-width: 1080px">

    <!-- Modal content-->
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal">&times;</button>
        <h4 class="modal-title">Modal Header</h4>
      </div>
      <div class="modal-body">
        <div class="table-responsive">

          <table class="display" id="example" style="text-align: center; width: 100%">

            <thead>
              <tr>
                <th>id</th>
                <th>Date</th>
              </tr>
            </thead>

            <tbody>

              <tr>
                <td>1</td>
                <td>'2020-06-01'</td>
              </tr>
              <tr>
                <td>2</td>
                <td>'2020-06-02'</td>
              </tr>

            </tbody>
          </table>
        </div>

        <button type="button" id="newBtn" class="btn btn-sm btn-info">Send post</button>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
      </div>
    </div>

  </div>
</div>

Answer 1

var table= $('#example').DataTable();
var tableBody = '#example tbody';
var form = new FormData();

在里面使用这段代码

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

并删除以下脚本

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

Answer 2

标题中的脚本实际上是

<script type="text/javascript" src="https://cdn.datatables.net/v/dt/dt-1.10.16/datatables.min.js"></script>

所以你建议：

var table= $('#example').DataTable();
    var tableBody = '#example tbody';
    var form = new FormData();

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

    $(tableBody).on('click', 'tr', function () {

        var cursor = table.row($(this));//get the clicked row
        var selected_id = cursor.data()[0];// this will give the id in the current row.

        $('#myModal').on('shown.bs.modal', function (event) {
            $("#testbutton").trigger("click");
        });


        $("#newBtn").on("click",function(){
            form.set("action", "select_id");
            form.set("selected_id", selected_id);

            var settings = {
                "url": "http://127.0.0.1:5000/test",
                "method": "POST",
                "timeout": 0,
                "processData": false,
                "mimeType": "multipart/form-data",
                "contentType": false,
                "data": form
            };

            $.ajax(settings).done(function (response) {
                console.log(response);
            });

        });

    });

这仍然不能解决我的问题：当您选择第 1 行然后选择第 2 行时，按钮将发送 2 个帖子，而不是仅发送 1 个所需帖子，第 2 行作为数据