Livewire结合Bootstrap模态框删除功能调用两次致404问题

以下是针对删除函数被调用两次问题的常见排查和解决步骤：

• 排查事件重复绑定
  Bootstrap模态框的事件（比如show.bs.modal、click）如果被多次绑定，会导致触发时执行多次删除逻辑。比如在Livewire组件的mount、render方法里重复执行事件绑定代码，每次组件更新都会新增一次绑定。
  解决办法：绑定事件前先解绑旧事件，或者使用一次性绑定：

  // 原生JS方式：先解绑再绑定
  const modal = document.getElementById('deleteModal');
  const handleModalShow = (e) => {
      // 模态框显示时的逻辑，比如传递要删除的ID
  };
  // 先移除旧绑定，避免重复
  modal.removeEventListener('show.bs.modal', handleModalShow);
  modal.addEventListener('show.bs.modal', handleModalShow);
  
  // jQuery方式：用one()实现一次性绑定
  $('#deleteModal').one('show.bs.modal', function(e) {
      // 处理逻辑
  });
  

• 检查删除按钮的事件绑定
  确保删除按钮只通过一种方式绑定删除方法，不要同时使用wire:click和原生onclick，也不要在组件代码里重复定义点击处理逻辑。比如只保留Livewire的绑定：

  <button wire:click="delete" class="btn btn-danger">确认删除</button>
  

• 避免循环生成多个模态框
  如果在数据循环里渲染模态框，会生成多个相同ID的模态框实例，每个都绑定了删除事件，触发时会同时调用多次删除函数。
  解决办法：将模态框放在循环外部，通过Livewire属性传递当前要删除的ID：

  <!-- 循环内仅放置触发按钮 -->
  @foreach($items as $item)
      <button wire:click="setDeleteId({{ $item->id }})" data-bs-toggle="modal" data-bs-target="#deleteModal">删除</button>
  @endforeach
  
  <!-- 唯一的删除模态框 -->
  <div class="modal fade" id="deleteModal" tabindex="-1">
      <div class="modal-dialog">
          <div class="modal-content">
              <div class="modal-body">
                  确定要删除这条数据吗？
              </div>
              <div class="modal-footer">
                  <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">取消</button>
                  <button wire:click="delete" class="btn btn-danger">确认删除</button>
              </div>
          </div>
      </div>
  </div>
  

  对应的Livewire组件代码：

  namespace App\Livewire;
  
  use Livewire\Component;
  use Illuminate\Support\Facades\Http;
  
  class ItemList extends Component
  {
      public $deleteId;
      public $items = [];
  
      public function setDeleteId($id)
      {
          $this->deleteId = $id;
      }
  
      public function delete()
      {
          if (!$this->deleteId) return;
  
          // 调用API删除数据
          $response = Http::delete("https://your-api-url/items/{$this->deleteId}");
  
          if ($response->successful()) {
              // 更新组件数据，比如重新获取列表
              $this->refreshItems();
          }
  
          // 重置删除ID并关闭模态框
          $this->deleteId = null;
          $this->dispatch('close-modal');
      }
  
      private function refreshItems()
      {
          $this->items = Http::get("https://your-api-url/items")->json();
      }
  
      public function render()
      {
          $this->refreshItems();
          return view('livewire.item-list');
      }
  }
  

• 删除后重置状态
  在删除方法执行完成后，及时重置deleteId这类状态属性，避免后续误触发删除逻辑；同时通过Livewire的dispatch事件关闭模态框，确保组件状态正确同步。

内容的提问来源于stack exchange，提问作者stev.devs