直接刪除圖片後，已刪除的圖片無法正常工作

Question

我在我的框架中使用codeigniter當我點擊我的圖片刪除按鈕時，第一次很好。當我再次運行ajax腳本兩次並且導致它通過我的json錯誤後，我直接刪除另一個第二個圖像。

如果我刪除一個圖像，然後刪除另一個直後刪除第二個圖像，它將不會運行多次後，我怎麼能做到這一點的證詞。

這似乎是一些事情與$('#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'); 
       } 
      },  
     }); 
    } 
}); 

莫代爾

<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> 

控制器功能

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

我想我已經用$(this).off(e);任何現在解決了它其他建議離子也將被充分使用。

至於什麼@Vickel在評論說，我現在用的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'); 
       } 
      }, 


     }); 
    } 
});