Постепенно увеличивающийся бегущий скрипт

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. Таким образом, первая запись была одобрена только POSTed один раз, а следующая была подтверждена POSTed дважды и продолжала увеличиваться после этого снова на 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

Вы добавляете обработчик клика к элементам .approveAttachment внутри обработчика клика для .attachmentView, который является родительским элементом.Таким образом, каждый раз при нажатии на элемент .approveAttachment обработчик для .attachmentView будет запускаться и добавлять еще один обработчик щелчка для .approveAttachment.Необходимо убедиться, что обработчик кликов для утверждения добавляется только один раз.Попробуйте удалить вложенные обработчики кликов, например:

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

Answer 2

Причина в том, что вы добавляете обработчики щелчков для .updateAttachment и .approveAttachment внутри функции успеха AJAX кнопки .attachmentView.Поэтому каждый раз, когда вы нажимаете эту кнопку, вы добавляете дополнительные обработчики щелчков для других кнопок, заставляя их запускаться несколько раз.

Вы должны поместить эти обработчики щелчков на верхний уровень.

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