Ajax 加载的 Laravel-Livewire 组件触发事件两次答案

【问题标题】：Laravel-Livewire component loaded by Ajax fires events twiceAjax 加载的 Laravel-Livewire 组件触发事件两次
【发布时间】：2022-06-14 22:22:04
【问题描述】：

我想打开一个通过 Ajax 加载的模式，其中包含嵌套的 LiveWire 组件。

我发现，三件事很重要：

Larvel 必须预先渲染（）视图
为了使该视图中的 livewire 按钮可交互，我需要在结果附加到 DOM 后的某处运行 Livewire.rescan()
正如 Livewire 的文档所建议的那样：wire:key="..." 不能经常使用...

所有这些规则都已考虑。

但是有一个问题：其中一个组件（它是一个上传组件）触发了两次 en 事件。我已经在 Ajax-Rendering 之外测试了这个组件，它工作正常。

我认为这一定与 Livewire.rescan() 有关。哦，我忘了提： “Livewire.rescan()”会引发错误（未定义函数） - 但 window.livewire.rescan()” 可以完成这项工作。

有人知道这个问题吗？

过程如下：

Livewire 组件包含几个非 livewire 按钮。每个都包含数据属性：

<div id="buttonWrapper">
...
<button class="openModal" data-id={{$item->id}}></button>
...
</div>

在 .JS 脚本中，我为每个按钮添加了一个侦听器，通过“buttonWrapper”委托：

$("#buttonWrapper").on('click','.openModal',function(){
   let id = $(this).data('id');
   $.post('/somewhere',{id:id},function(res){
      //There's a Wrapper for dynamic Modal Content in the Layout as well
     $("#modalWrapper").html(res.html);
   })
});

按钮单击调用控制器“/somewhere”并返回一个渲染视图，其中包含以下内容：

<div>
    @livewire('modal.some-modal',[],key('conversationModal'))
</div>

livewire/modal/some-modal.blade.php 看起来像一个基本的 Bootstrap 5 Modal，它包含下一个组件：

<div>
   <div class="modal fade" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="exampleModalLabel">Modal title</h5>
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
      </div>
      <div class="modal-body">

         @livewire('modal.component_a')        

      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Save changes</button>
      </div>
    </div>
  </div>
</div>
<script>
$(document).ready(function(){
var modalDom = document.getElementById('exampleModal');
            var modal = new bootstrap.Modal(modalDom);
            modal.show();
});
</script>
</div>

模态框内的组件确实包含另一个组件...

我试图将它抽象得尽可能简单。我已经尝试了所有方法 - 也包裹了组件，但没有成功。

如果我在步骤 4 中将“window.livewire.rescan()”添加到脚本部分，则 5. 中最后一个嵌套组件中的按钮是可点击的，但 rescan() 也会使每个组件触发两次。

那么：我可以做些什么来激活最新的嵌套组件，同时确保它不会导致双重事件？

【问题讨论】：

如果没有看到你的实际代码真的很难说。

标签： laravel-8 laravel-livewire