Löschen von Bildern direkt nach einem anderen, das gelöscht wurde funktioniert nicht richtig

Question

Ich benutze codeigniter für mein Framework Wenn ich auf mein Bild Löschtaste klicke es funktioniert das erste Mal gut. Wie auch immer, wenn ich ein zweites Bild gleich danach lösche, wird das Ajax-Skript zweimal ausgeführt und durch meinen JSON-Fehler verursacht.

Question wenn ich ein Bild lösche und dann sofort ein anderes lösche, wie kann ich es so machen, wenn ich das zweite Bild lösche, wird es nicht mehrmals laufen?

Es scheint ein Ding mit dem $('#button-refresh').trigger('click');

$(document).on('click', '#button-delete', function(e) { 
    if (confirm('Are You Sure!')) { 

      e.preventDefault(); 

      $.ajax({ 
      url: "<?php echo base_url('admin/common/filemanager/delete');?>", 
      type: 'post',  
      dataType: 'json', 
      data: { 
       cache: $(this).attr('data-cache'), 
       image: $(this).attr('data-path') 
      }, 
      success: function(json) { 
       if (json['error']) { 
        alert(json['error']); 
       } 

       if (json['success']) {           
        $('#button-refresh').trigger('click'); 
       } 
      },  
     }); 
    } 
}); 

Modal

<div class="modal-dialog modal-lg"> 
    <div class="modal-content"> 
     <div class="modal-header"> 
      <div class="btn-toolbar mb-3" role="toolbar" aria-label="Toolbar with button groups"> 

      <div class="btn-group mr-2" role="group" aria-label="First group"> 
      <a class="btn btn-dark" href="<?php echo $parent;?>" data-toggle="tooltip" data-placement="top" title="<?php echo $button_parent; ?>" id="button-parent" class="btn btn-default"><i class="fa fa-level-up"></i></a> 
      <button type="button" data-toggle="tooltip" data-placement="top" title="<?php echo $button_upload; ?>" id="button-upload" class="btn btn-primary"><i class="fa fa-upload"></i></button> 

      <button type="button" data-toggle="tooltip" data-placement="top" title="<?php echo $button_folder; ?>" id="button-folder" class="btn btn-secondary"><i class="fa fa-folder"></i></button> 

      <a id="button-refresh" href="<?php echo $refresh;?>" data-toggle="tooltip" data-placement="top" title="<?php echo $button_refresh; ?>" class="btn btn-success"><i class="fa fa fa-refresh" aria-hidden="true"></i></a> 

      <button type="button" data-toggle="tooltip" data-placement="top" title="<?php echo $button_delete; ?>" id="button-delete" class="btn btn-danger"><i class="fa fa-trash" aria-hidden="true"></i></button> 
      </div> 

      <div class="input-group"> 
      <span class="input-group-btn"> 
      <button class="btn btn-secondary" type="button"><i class="fa fa-search" aria-hidden="true"></i></button> 
      </span> 
      <input type="text" class="form-control" placeholder="Search for..." aria-label="Search for..."> 
      </div> 

      </div> 
     </div> 

     <div class="modal-header justify-content-center"> 
     <ol class="breadcrumb"> 
     <?php foreach ($breadcrumbs as $breadcrumb) { ?> 
     <li class="breadcrumb-item"><a href="<?php echo $breadcrumb['href']; ?>"><?php echo $breadcrumb['text']; ?></a></li> 
     <?php } ?> 
     </ol> 
     </div> 

     <div class="modal-body"> 

     <?php $image_row = 0; ?> 

     <?php foreach (array_chunk($images, 4) as $image) { ?> 

     <div class="row"> 

      <?php foreach ($image as $image) { ?> 
      <div class="col-sm-3 text-center"> 
      <?php if ($image['type'] == 'directory') { ?> 

      <div class="text-center"> 
      <a href="<?php echo $image['href']; ?>" class="directory" style="vertical-align: middle;"><i class="fa fa-folder fa-5x"></i> 
      </a> 
      </div> 

      <label> 
      <input type="checkbox" name="path[]" value="<?php echo $image['path']; ?>" /> 
      <?php echo $image['name']; ?> 
      </label> 
      <?php } ?> 

      <?php if ($image['type'] == 'image') { ?> 

      <div > 
      <a href="<?php echo $image['href']; ?>"> 
      <?php echo $image['thumb']; ?> 
      </a> 

      <div class="mb-4 mt-2"> 
      <button type="button" id="button-delete" data-cache="<?php echo $image['cache']; ?>" data-path="<?php echo $image['path']; ?>"><i class="fa fa-trash-o"></i></button> 
      </div> 
      </div> 

      <?php } ?> 

      </div><!-- Column --> 

      <?php } ?> 

     </div><!-- Row--> 

      <?php $image_row++; ?> 

     <?php } ?> 


     </div><!-- Modal Body--> 

    <div class="modal-footer justify-content-center"> 
     <?php echo $pagination; ?> 
    </div> 
    </div> 
</div> 

Regler Funktion zu sein

public function delete() { 
    $json = array(); 

    if (null !==($this->input->post('cache'))) { 
     $cache_dir = $this->security->xss_clean(DIR_IMAGE . 'cache/' . $this->input->post('cache')); 
    } else { 
     $json['error'] = 'Could not locate file ' . $this->input->post('cache'); 
    } 

    if (null !==($this->input->post('image'))) { 
     $image_dir = $this->security->xss_clean(DIR_IMAGE . $this->input->post('image')); 
    } else { 
     $json['error'] = 'Could not locate file ' . $this->input->post('image'); 
    } 

    if (!$json) { 

     if (is_file($cache_dir)) { 

      unlink($image_dir); 

      unlink($cache_dir); 

      $json['success'] = TRUE; 

     } else { 

      $json['error'] = 'Could not unlink file'; 
     } 
    } 

    $json = $this->security->xss_clean($json); 
    $this->output->set_content_type('Content-Type: application/json'); 
    $this->output->set_output(json_encode($json)); 
} 

Answer 1

Ich glaube, ich es jetzt durch die Verwendung $(this).off(e); gelöst haben jede andere schlagen vor Ionen würden auch voll sein.

Als was @Vickel in Kommentar, sagte jetzt e.stopImmediatePropagation()

$(document).on('click', '#button-delete', function(e) { 

    e.stopImmediatePropagation(); 
    //$(this).off(e); 

    if (confirm('Are You Sure!')) { 
     $.ajax({ 
      url: "<?php echo base_url('admin/common/filemanager/delete');?>", 
      type: 'post',  
      dataType: 'json', 
      data: { 
       cache: $(this).attr('data-cache'), 
       image: $(this).attr('data-path') 
      }, 
      success: function(json) { 
       if (json['error']) { 
        alert(json['error']); 
       } 

       if (json['success']) {           
        $('#button-refresh').trigger('click'); 
       } 
      }, 


     }); 
    } 
});