为什么Laravel 8中Livewire触发点击事件时自定义JS代码会失效

问题原因 #

Livewire 触发组件状态更新后，会重新渲染并替换组件对应的DOM节点，你在index.js中默认是页面首次加载完成后才对现有DOM元素绑定事件，元素被Livewire替换后，原有的事件绑定就会丢失，所以会出现所有JS事件都被禁用的现象。

可行解决方案 #

• 方案1：使用事件委托绑定事件
  将原本直接绑定到具体元素的事件，改为绑定到不会被Livewire更新替换的顶层节点（如document、body或布局文件中固定的外层容器），通过事件冒泡匹配目标元素执行逻辑，示例修改如下：

// 原来的写法（元素替换后失效）
document.querySelector('.target-element').addEventListener('click', function () {
  // 业务逻辑
})

// 修改后的委托写法（永久生效）
document.addEventListener('click', function (e) {
  if (e.target.matches('.target-element')) {
    // 原业务逻辑
  }
})

• 方案2：监听Livewire生命周期钩子重新初始化事件
  将你所有的JS事件绑定逻辑封装为独立的初始化函数，在Livewire首次加载和每次更新完成后都重新执行初始化，示例代码：

// 封装你的事件绑定逻辑
function initCustomScripts() {
  // 原本页面加载时执行的所有绑定逻辑都放在这里
}

// 页面首次加载Livewire完成后执行
document.addEventListener('livewire:load', function () {
  initCustomScripts()
})

// 每次Livewire更新DOM完成后执行
document.addEventListener('livewire:update', function () {
  initCustomScripts()
})

如果你的绑定逻辑用了jQuery，执行初始化前可以先调用off解除原有绑定，避免重复绑定：

$('.target-element').off('click').on('click', function () {
  // 业务逻辑
})

• 方案3：改用Alpine.js实现交互逻辑
  如果你的项目引入了Laravel生态默认的Alpine.js，可将原有的JS交互逻辑改用Alpine语法实现，Alpine和Livewire完全兼容，DOM更新后会自动重新初始化绑定，不会出现事件失效问题。

额外注意点 #

你当前引入JS的代码中asset方法的参数缺少单引号，会导致模板解析报错，建议修正为：

<script src="{{ asset('js/index.js') }}" defer></script>

内容的提问来源于stack exchange，提问作者Carlos