提问者:小点点

jQuery:模式窗口内的按钮


我试图在一个模式窗口中的表中选择一行,然后让该模式窗口中的一个按钮('new btn')使用该行的选定id向服务器发送post请求。 该按钮应在按下时发送最后选定行的数据,但它发送的帖子数与先前单击某行的次数相同(而不是仅发送最后一个)。因此,如果先前单击了第1,2,3行,它将发送3个帖子,而不是仅发送1个第3行选择的帖子。
我怀疑括号放置不正确,但当将该按钮置于模态函数之外时,它根本不会触发。 任何帮助都不胜感激。

null

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>

null


共2个答案

匿名用户

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>

匿名用户

标题中的脚本实际上是

null

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