刪除請求的形式之外Laravel

Question

我是Laravel新手，我使用此Jeffrey Way script提交DELETE請求沒有窗體。

我的鏈接：

<a class="btn btn-danger btn-sm delete" href="files/<?=$file->id?>" data-method="delete"> 
    <i class="fa fa-check"></i> Yes I&#39;m sure 
</a> 

的腳本，它現在是在視圖文件如下：

$(document).on("click", ".delete", function() { 

     var laravel = { 
     initialize: function() { 
      this.methodLinks = $('a[data-method]'); 

      this.registerEvents(); 
     }, 

     registerEvents: function() { 
      this.methodLinks.on('click', this.handleMethod); 
     }, 

     handleMethod: function(e) { 
      var link = $(this); 
      var httpMethod = link.data('method').toUpperCase(); 
      var form; 

      // If the data-method attribute is not PUT or DELETE, 
      // then we don't know what to do. Just ignore. 
      if ($.inArray(httpMethod, ['PUT', 'DELETE']) === - 1) { 
      return; 
      } 

      // Allow user to optionally provide data-confirm="Are you sure?" 
      if (link.data('confirm')) { 
      if (! laravel.verifyConfirm(link)) { 
       return false; 
      } 
      } 

      form = laravel.createForm(link); 
      form.submit(); 

      e.preventDefault(); 
     }, 

     verifyConfirm: function(link) { 
      return confirm(link.data('confirm')); 
     }, 

     createForm: function(link) { 
      var form = 
      $('<form>', { 
      'method': 'POST', 
      'action': link.attr('href') 
      }); 

      var token = 
      $('<input>', { 
      'type': 'hidden', 
      'name': 'csrf_token', 
       'value': '<?=csrf_token();?>' // hmmmm... 
      }); 

      var hiddenInput = 
      $('<input>', { 
      'name': '_method', 
      'type': 'hidden', 
      'value': link.data('method') 
      }); 

      return form.append(token, hiddenInput) 
        .appendTo('body'); 
     } 
     }; 

     laravel.initialize(); 

    }); 

這是從主旨，唯一的變化拉動的確切腳本我做的是我添加了觸發器$(document).on("click", ".delete", function()。

我遇到的問題是，當我點擊要刪除的鏈接時，我會發送到另一個頁面（如/files/6或任何文件ID）。它正在將<a>標籤視爲正常鏈接，而不是DELETE請求，因爲我希望發生這種情況。有誰知道爲什麼會發生這種情況？

Answer 1

我找到了一個解決方案 - 我有兩個問題。

首先 - 你可能需要在你的href附加斜線，對我來說，我不得不改變

href="files/<?=$file->id?>"到href="/files/<?=$file->id?>"

其次，我遇到了問題，因爲我的鏈接是一個引導的內popover（在data-content之內），這使問題變得更加複雜。我將劇本恢復到由Jeffrey Way提供的原始劇本（使用$(function() {而不是$(document).on("click", ".delete", function() {）。然後，我創建了一個隱藏的鏈接元素的酥料餅之外：

<a href="/files/<?=$file->id?>" class="delete-file hidden" data-method="delete"></a>

然後，我觸發使用jQuery該鏈接的點擊（這兩個元素是在其父<div class="panel-body">：

$(document).on("click", ".delete", function(){ 
    $(this).closest(".panel-body").find(".delete-file").trigger("click"); 
}); 

Answer 2

錨點的默認操作是導航，您需要在點擊處理程序中阻止它。

$(document).on("click", ".delete", function(e) { 
    e.preventDefault(); 
    ...