Twitter bootstrap 调用 ajax 超过 1 次

Question

我正在使用 twitter bootstrap 3.3.1 来弹出模式。 modal 的内容是一种形式（非远程）。我正在使用 ajax 在数据库中插入值。

我的问题是，如果我打开表单并关闭它，然后再次打开它，那么在提交表单时，ajax 会被调用两次（我可以在控制台中看到）。

我的模式与元素（按钮）绑定，该元素（按钮）在数据表中多次动态生成。

下面是我的js代码

$("#datatable").on('click', '.my-button', function(){

                var id = $(this).attr("data-id");

                $('#myModal').modal('show');                

                $('.btn-close-modal').on('click', function() {                          
                    $('#myModal').modal('hide');

                });

                $('.btn-save-changes').on('click', function() {

                    $('#myModal').modal('hide');


                    var rmk = $('#remark').val();

                    $.ajax({
                        url: 'add-value.php',
                        type: 'POST',
                        data: { id: id, rm: rmk },
                        success: function(a) {

                        }
                    });
                });
});

下面是我的模态代码

<div class="modal" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close btn-close-modal" data-dismiss="modal"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button>
        <h4 class="modal-title" id="myModalLabel">Form</h4>
      </div>
      <div class="modal-body" id="modal-body">

        <div class="row">
         <div class="col-md-12">
            <div class="box box-primary">
                <div class="box-header">
                </div><!-- /.box-header -->

                <!-- form start -->
                <form role="form" method="post">                        
                    <div class="box-body">
                        <div class="form-group">
                                <label for="name">Remark</label>                                
                                 <input type="text" class="form-control" id="remark" name="remark" >

                            </div><!-- /.form group -->                         

                    </div><!-- /.box-body -->  

                </form>
            </div><!-- /.box -->
         </div>
        </div> <!--/.row--->

      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default btn-close-modal">Close</button>
        <button type="button" class="btn btn-primary btn-save-changes">Submit</button>
      </div>
    </div>
  </div>
 </div>

我已经尝试了以下所有这些代码，但它们都不起作用

$('#myModal').on('hide.bs.modal', function () {
   $('#myModal').removeData();
})

$("#myModal").on('hidden.bs.modal', function () {
    $(this).data('bs.modal', null);
});

$('body').on('hidden.bs.modal', '#myModal', function () {
  $(this).removeData('bs.modal');
});

$( '#myModal' ).modal( 'hide' ).data( 'bs.modal', null );

Answer 1

我要大胆猜测一下，每次调用 $('#datatable').on() 时，表单都会发布一次。尝试分离 jQuery 以显示/隐藏模式和发布表单，例如：

$('#datatable').on('click', function () {
    // show the modal
});

$('.btn-close-modal').on('click', function () {
    // hide the modal
});

$('.btn-save-changes').on('click', function () {
    // ajax
});