Laravel Livewire组件中jQuery代码无法正常运行问题

Livewire组件采用异步动态渲染、DOM差量更新的机制，直接写在组件模板内的裸<script>标签存在两个核心问题：

1. 脚本执行时机早于组件DOM挂载：组件内的脚本会在页面初始解析阶段运行，此时Livewire还没把组件对应的DOM节点渲染到页面上，jQuery选择器$('#id')根本拿不到目标元素，自然不会生效。
2. 差量更新不会重复执行内联脚本：后续Livewire触发组件重渲染（比如调用组件方法、更新公共属性）时，DOM diff流程会直接替换更新的DOM节点，既不会重新执行原来的内联脚本，之前绑定的事件、做的样式修改也可能因为DOM替换失效。

普通视图是后端同步渲染完成后再整体返回给浏览器，脚本执行时DOM已经完整挂载，所以jQuery可以正常运行。

方案1：使用Livewire官方提供的加载钩子（兼容Livewire 2/3） #

把组件内的jQuery代码放到Livewire官方的加载完成监听回调里，保证DOM挂载完成后再执行，如果需要每次组件重渲染后都重新应用效果，再加个渲染完成的钩子即可，修改resources/views/livewire/search.blade.php代码如下：

<div>
    <h1 id="id">Test</h1>
    <script>
        // 等Livewire初始加载、DOM挂载完成再执行
        document.addEventListener('livewire:load', function () {
            $('#id').css("background-color", "red");

            // 每次组件重渲染、DOM更新完成后重新执行逻辑
            Livewire.hook('message.processed', function () {
                $('#id').css("background-color", "red");
            })
        })
    </script>
</div>

方案2：逻辑迁移到全局app.js（推荐，便于维护） #

把组件相关的jQuery逻辑统一放到全局入口文件，避免内联脚本的执行时机问题，修改resources/js/app.js代码如下：

import $ from 'jquery';
window.$ = $;

document.addEventListener('livewire:load', () => {
    // 初始加载执行样式修改
    const setTestBg = () => $('#id').css("background-color", "red");
    setTestBg();

    // 每次组件DOM更新后重新执行
    Livewire.hook('message.processed', setTestBg);

    // 事件绑定建议用委托，绑定到不会被替换的顶层节点，避免DOM更新后事件失效
    $(document).on('click', '#id', function() {
        // 你的点击事件逻辑
    })
})

方案3：Livewire 3专属写法，用官方脚本指令 #

如果项目用的是Livewire 3版本，直接用@script/@endscript指令包裹组件内的JS代码，框架会自动处理执行时机、依赖加载顺序，代码如下：

<div>
    <h1 id="id">Test</h1>
    @script
    <script>
        $('#id').css("background-color", "red");
        // 监听组件重渲染完成事件
        $wire.on('contentRendered', () => {
            $('#id').css("background-color", "red");
        })
    </script>
    @endscript
</div>

• 不要在Livewire组件内写无任何时机包裹的裸JS脚本做DOM操作，90%的概率会因为执行时机问题失效。
• 检查页面脚本引入顺序，保证jQuery挂载到window的逻辑在Livewire脚本之前执行，避免出现$ is not defined报错。
• 所有绑定到Livewire渲染DOM上的事件，尽量用事件委托的方式绑定到document或者其他不会被Livewire替换的静态父节点上，避免组件重渲染后事件丢失。

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