jquery - 递增运行脚本

Question

我将首先列出详细信息，然后将所有内容放在底部，以确保内容全面。

我有一个脚本，可以在其中单击表行以在左侧面板中显示该行的详细信息。在该面板中，还有一个名为“批准附件”的按钮，单击后将执行 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。因此，第一条记录仅批准 POST 一次，但下一个被批准 POST 两次，之后又继续增加 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>

Answer 1

原因是您在 .attachmentView 按钮的 AJAX 成功函数内添加了 .updateAttachment 和 .approveAttachment 的点击处理程序。因此，每次单击该按钮时，都会为其他按钮添加额外的单击处理程序，从而导致它们运行多次。

您应该将这些点击处理程序放在顶层。

$(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);
    }
  });
});