Jquery 递增运行脚本

我将首先列出细节，然后在底部包括所有内容，以确保我是彻底的

我有一个脚本，单击表中的一行，在左侧的面板中显示该行的详细信息。在该面板中，还有一个名为Approve Attachment的按钮，单击该按钮时，将执行AJAX POST请求以更改记录（通过更改字段），并通过删除该特定行并更改顶部的计数来更新单击的原始表

特定脚本：

$(document).on("click", ".approveAttachment", function() {
  $.ajax({
    type: 'POST',
    url: '/equipment/attachments/details/approve',
    data: {
      attachmentID: $(this).data('id'),
      approvalID: 1,
      _token: $('input[name=_token]').val(),
      dataType: 'json',
    },
    success: function(data) {
      if (data !== undefined) {
        var id = data.details.id;
        var table = $('#unapprovedAttachments');
        table.find('#' + id).hide();
        $('#attachmentDetails').html('');
        var count = $('#attachmentCount').html();
        var newCount = count - 1;
        $('#attachmentCount').html(newCount);
      } else {
        console.log('failed');
        console.log(data);
      }
    },
    error: function(data) {
      console.log('error');
      console.log(data);
    }

  });


});

我的问题在于，我发现每次单击“批准”按钮时，比如在下一条记录上，或者在下一条记录上，或者在下一条记录之后，或者在第n个记录上，请求的数量都会增加1。因此，第一条记录只被批准发布一次，但下一条记录被批准发布两次，并在之后继续增加1

我一点也不知道它为什么这样做以及如何这样做，这相当令人恼火。下面是“整个页面”，因此我假设如果上面的特定脚本没有导致此问题，那么下面代码中的某些内容是：

 <div class="col-md-3">
     <div class="box box-default box-solid">
            <div class="box-header with-border">
              <h3 class="box-title">Attachments Requiring Review (<span id="attachmentCount">{{$attachments->count()}}</span>)</h3>
              <!-- /.box-tools -->
            </div>
            <!-- /.box-header -->
            <div class="box-body">
                {{ csrf_field() }} 
              <div style="max-height: 100vh; overflow-y:scroll;">
    <table class="table table-striped table-hover" id="unapprovedAttachments">
     <tbody>
            @foreach($attachments as $attachment)
            <tr style="cursor: pointer" class="attachmentView" id="{{$attachment->id}}">
                <td>{{$attachment->id}}<br>
                    @if($attachment->unitID)
                        @if(empty($attachment->equipment->unit_id))
                        No Unit ID
                        @else
                    {{$attachment->equipment->unit_id}}

                        @endif
                    @endif
                </td>
                <td>{{$attachment->attachmentCategory}}<br>@if($attachment->date){{$attachment->date->format('F j, Y')}}@endif</td>
                <td>{{$attachment->vendor}}</td>
                <td><i class="fa fa-fw fa-arrow-right"></i></td>
            </tr>
            @endforeach
        </tbody>

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

    </div>

<div class="col-md-9" id="attachmentDetails">


</div>
<script>
    $(document).on("click", ".attachmentView", function(){
            $.ajax({
            type:'GET',
            url: '/equipment/attachments/details/api',
            data: {
                attachmentID: $(this).attr('id'),
                _token: $('input[name=_token]').val(),
                dataType: 'json',
            },
            success: function(data) {
                if(data !== undefined) {
                        $('#attachmentDetails').html('<div class="col-md-8"><div class="box box-default box-solid"><div class="box-header with-border"><h3 class="box-title">Attachment View</h3>      </div><div class="box-body"><div id="viewer" style="height: 600px; width: 100%">                 <object data="'+data.url+'" type="application/pdf" width="100%" height="100%"><iframe src="'+data.url+'" style="border: none;" width="100%" height="100%">This browser does not support PDFs. Please download the PDF to view it: <a href="'+data.url+'">Download PDF</a></iframe></object></div></div></div></div><div class="col-md-4"><button class="btn btn-primary approveAttachment" data-id="'+data.details.id+'">Approve Attachment</button><div class="box box-default box-solid"><div class="box-header with-border"><h3 class="box-title">Details</h3></div><div class="box-body"><table class="table table-striped table-condensed"><tbody><tr><td><strong>Category</strong></td><td>'+data.details.attachmentCategory+'</td></tr><tr><td><strong>Unit ID</strong></td><td>'+data.equipment.unit_id+'</td></tr><tr><td><strong>Date</strong></td><td>'+data.details.date+'</td></tr><tr><td><strong>Vendor</strong></td><td>'+data.details.vendor+'</td></tr><tr><td><strong>Service ID</strong></td><td>'+data.details.serviceID+'</td></tr><tr><td><strong>Odometer</strong></td><td>'+data.details.odometer+'</td></tr><tr><td><strong>Amount</strong></td><td>'+data.details.amount+'</td></tr><tr><td><strong>Title</strong></td><td>'+data.details.title+'</td></tr><tr><td><strong>Emissions Passed</strong></td><td>'+data.details.emissionsPassed+'</td></tr><tr><td><strong>Emissions Verification No.</strong></td><td>'+data.details.emissionsVerificationNo+'</td></tr><tr><td><strong>File Path</strong></td><td><input class="form-control" name="attachmentPath" value="'+data.details.attachment+'"></td></tr></tbody></table><button class="btn btn-primary updateAttachment" data-id="'+data.details.id+'">Update Attachment</button></div>          </div><div class="box box-default box-solid"><div class="box-header with-border"><h3 class="box-title">Maintenance Details</h3></div><div class="box-body"><table class="table table-striped table-condensed" id="attachmentMaintenanceDetails"><tbody></tbody></table></div></div></div>');
                        $.each(data.maintenance, function(i,val) {
                                    $('<tr>').append(
                                    $('<td>').html(val.maintenanceCategory),
                                    $('<td>').html(val.description)).appendTo('#attachmentMaintenanceDetails');

                            });

                        $(document).on("click", ".updateAttachment", function(){
                            $.ajax({
                            type:'POST',
                            url: '/equipment/attachments/details/update',
                            data: {
                                attachmentID: $(this).data('id'),
                                attachmentPath: $('input[name=attachmentPath]').val(),
                                _token: $('input[name=_token]').val(),
                                dataType: 'json',
                            },
                            success: function(data) {
                                if(data !== undefined) {
                                        $('#viewer').html('<object data="'+data.url+'" type="application/pdf" width="100%" height="100%"><iframe src="'+data.url+'" style="border: none;" width="100%" height="100%">This browser does not support PDFs. Please download the PDF to view it: <a href="'+data.url+'">Download PDF</a></iframe></object>');
                                    }else{
                                        console.log('failed');
                                        console.log(data);
                                    }
                            },
                            error: function(data) {
                                console.log('error');
                                console.log(data);
                            }

                        });


                            });

                    $(document).on("click", ".approveAttachment", function(){
                            $.ajax({
                            type:'POST',
                            url: '/equipment/attachments/details/approve',
                            data: {
                                attachmentID: $(this).data('id'),
                                approvalID: 1,
                                _token: $('input[name=_token]').val(),
                                dataType: 'json',
                            },
                            success: function(data) {
                                if(data !== undefined) {
                                        var id = data.details.id;
                                        var table = $('#unapprovedAttachments');
                                        table.find('#'+id).hide();
                                        $('#attachmentDetails').html('');
                                        var count = $('#attachmentCount').html();
                                        var newCount = count - 1;
                                        $('#attachmentCount').html(newCount);
                                    }else{
                                        console.log('failed');
                                        console.log(data);
                                    }
                            },
                            error: function(data) {
                                console.log('error');
                                console.log(data);
                            }

                        });


                            });

                    }else{
                        console.log('failed');
                        console.log(data);
                    }
            },
            error: function(data) {
                console.log('error');
                console.log(data);
            }

        });


            });
</script>

需要审阅的附件（{{$Attachments->count（）}}）
{{csrf_field（）}}
@foreach（$attachments作为$attachment）
{{$attachment->id}}

@如果（$attachment->unitID）
@if（空（$attachment->device->unit_id））
没有单位ID
@否则
{{$attachment->device->unit_id}
@恩迪夫
@恩迪夫
{{$attachment->attachmentCategory}}
@if（$attachment->date）{{{$attachment->date->format（'fj，Y'）}}@endif
{{$attachment->vendor}
@endforeach
$（文档）.on（“单击”，“.attachmentView”，函数（））{
$.ajax({
类型：'GET'，
url:“/equipment/attachments/details/api”，
数据：{
attachmentID:$（this.attr（'id'），
_令牌：$（'input[name=_token]'）。val（），
数据类型：“json”，
},
成功：功能（数据）{
如果（数据！==未定义）{
$（'#attachmentDetails'）.html（“附件视图”此浏览器不支持PDF。请下载PDF以查看：批准附件详细信息类别'+数据.详细信息.附件类别+'单元ID'+数据.设备.单元ID+'日期'+数据.详细信息.日期+'供应商'+数据.详细信息.供应商+服务电子身份证'+data.details.serviceID+'里程表'+data.details.Odometer+'数量'+data.details.Title+'通过的排放量'+data.details.emissionsPassed+排放验证号'+data.details.emissionsVerificationNo+文件路径更新附件维护详情）；
$。每个（数据维护、功能（i、val）{
$（''）。追加(
$（''）.html（val.maintenanceCategory），
$（“”）.html（val.description））.appendTo（“#attachmentMaintenanceDetails”）；
});
$（文档）.on（“单击”，“.updateAttachment”，函数（））{
$.ajax({
类型：'POST'，
url:“/设备/附件/详细信息/更新”，
数据：{
attachmentID:$（this）.data（'id'），
attachmentPath:$（'input[name=attachmentPath]'）。val（），
_令牌：$（'input[name=_token]'）。val（），
数据类型：“json”，
},
成功：功能（数据）{
如果（数据！==未定义）{
$（'#viewer'）.html（'此浏览器不支持PDF。请下载PDF以查看：'）；
}否则{
console.log（'failed'）；
控制台日志（数据）；
}
},
错误：函数（数据）{
console.log（'error'）；
控制台日志（数据）；
}
});
});
$（文档）.on（“单击“，”.approveAttachment”，函数（）{
$.ajax({
类型：'POST'，
url:“/设备/附件/详细信息/批准”，
数据：{
attachmentID:$（this）.data（'id'），
批准：1，
_令牌：$（'input[name=_token]'）。val（），
数据类型：“json”，
},
成功：功能（数据）{
如果（数据！==未定义）{
var id=data.details.id；
var表=$（'unapprovedAttachments'）；
table.find（'#'+id）.hide（）；
$（'#attachmentDetails'）.html（''；
var count=$（'#attachmentCount'）.html（）；
var newCount=count-1；
$（'#attachmentCount'）.html（newCount）；
$(document).on("click", ".attachmentView", function() {
  $.ajax({
    type: 'GET',
    url: '/equipment/attachments/details/api',
    data: {
      attachmentID: $(this).attr('id'),
      _token: $('input[name=_token]').val(),
      dataType: 'json',
    },
    success: function(data) {
      if (data !== undefined) {
        $('#attachmentDetails').html('<div class="col-md-8"><div class="box box-default box-solid"><div class="box-header with-border"><h3 class="box-title">Attachment View</h3>      </div><div class="box-body"><div id="viewer" style="height: 600px; width: 100%">                 <object data="' + data.url + '" type="application/pdf" width="100%" height="100%"><iframe src="' + data.url + '" style="border: none;" width="100%" height="100%">This browser does not support PDFs. Please download the PDF to view it: <a href="' + data.url + '">Download PDF</a></iframe></object></div></div></div></div><div class="col-md-4"><button class="btn btn-primary approveAttachment" data-id="' + data.details.id + '">Approve Attachment</button><div class="box box-default box-solid"><div class="box-header with-border"><h3 class="box-title">Details</h3></div><div class="box-body"><table class="table table-striped table-condensed"><tbody><tr><td><strong>Category</strong></td><td>' + data.details.attachmentCategory + '</td></tr><tr><td><strong>Unit ID</strong></td><td>' + data.equipment.unit_id + '</td></tr><tr><td><strong>Date</strong></td><td>' + data.details.date + '</td></tr><tr><td><strong>Vendor</strong></td><td>' + data.details.vendor + '</td></tr><tr><td><strong>Service ID</strong></td><td>' + data.details.serviceID + '</td></tr><tr><td><strong>Odometer</strong></td><td>' + data.details.odometer + '</td></tr><tr><td><strong>Amount</strong></td><td>' + data.details.amount + '</td></tr><tr><td><strong>Title</strong></td><td>' + data.details.title + '</td></tr><tr><td><strong>Emissions Passed</strong></td><td>' + data.details.emissionsPassed + '</td></tr><tr><td><strong>Emissions Verification No.</strong></td><td>' + data.details.emissionsVerificationNo + '</td></tr><tr><td><strong>File Path</strong></td><td><input class="form-control" name="attachmentPath" value="' + data.details.attachment + '"></td></tr></tbody></table><button class="btn btn-primary updateAttachment" data-id="' + data.details.id + '">Update Attachment</button></div>          </div><div class="box box-default box-solid"><div class="box-header with-border"><h3 class="box-title">Maintenance Details</h3></div><div class="box-body"><table class="table table-striped table-condensed" id="attachmentMaintenanceDetails"><tbody></tbody></table></div></div></div>');
        $.each(data.maintenance, function(i, val) {
          $('<tr>').append(
            $('<td>').html(val.maintenanceCategory),
            $('<td>').html(val.description)).appendTo('#attachmentMaintenanceDetails');
        });
      } else {
        console.log('failed');
        console.log(data);
      }
    },
    error: function(data) {
      console.log('error');
      console.log(data);
    }
  });
});

$(document).on("click", ".updateAttachment", function() {
  $.ajax({
    type: 'POST',
    url: '/equipment/attachments/details/update',
    data: {
      attachmentID: $(this).data('id'),
      attachmentPath: $('input[name=attachmentPath]').val(),
      _token: $('input[name=_token]').val(),
      dataType: 'json',
    },
    success: function(data) {
      if (data !== undefined) {
        $('#viewer').html('<object data="' + data.url + '" type="application/pdf" width="100%" height="100%"><iframe src="' + data.url + '" style="border: none;" width="100%" height="100%">This browser does not support PDFs. Please download the PDF to view it: <a href="' + data.url + '">Download PDF</a></iframe></object>');
      } else {
        console.log('failed');
        console.log(data);
      }
    },
    error: function(data) {
      console.log('error');
      console.log(data);
    }
  });
});

$(document).on("click", ".approveAttachment", function() {
  $.ajax({
    type: 'POST',
    url: '/equipment/attachments/details/approve',
    data: {
      attachmentID: $(this).data('id'),
      approvalID: 1,
      _token: $('input[name=_token]').val(),
      dataType: 'json',
    },
    success: function(data) {
      if (data !== undefined) {
        var id = data.details.id;
        var table = $('#unapprovedAttachments');
        table.find('#' + id).hide();
        $('#attachmentDetails').html('');
        var count = $('#attachmentCount').html();
        var newCount = count - 1;
        $('#attachmentCount').html(newCount);
      } else {
        console.log('failed');
        console.log(data);
      }
    },
    error: function(data) {
      console.log('error');
      console.log(data);
    }
  });
});

$(document).on("click", ".attachmentView", function(){
    //...
});
$(document).on("click", ".updateAttachment", function(){
    //...
});
$(document).on("click", ".approveAttachment", function(){
    //...
});