Laravel Livewire组件更新后JS脚本失效，如何重新激活？

核心问题分析 #

Livewire更新组件DOM时会替换原有元素，导致之前绑定的JS插件（日期选择器、手机号掩码）丢失关联。而Cannot read properties of undefined (reading 'setDefaults')错误，说明$.datepicker未被正确加载或jQuery上下文丢失。

解决方案步骤 #

1. 确保插件全局加载且顺序正确 #

• 错误根源是jQuery UI Datepicker或Inputmask未全局可用，需在主模板（如layouts/app.blade.php）中按以下顺序加载：
  1. jQuery
  2. jQuery UI Datepicker
  3. Inputmask
• 不要仅在组件内局部加载这些库，否则Livewire更新后可能丢失上下文。

2. 用Livewire官方客户端钩子重新初始化插件 #

放弃手动触发事件的方式，改用Livewire提供的DOM更新钩子，确保在DOM完全更新后执行初始化：

@push('scripts')
<script>
    // 封装初始化逻辑，方便重复调用
    function initFormPlugins() {
        // 先销毁旧实例，避免重复绑定导致的冲突
        $(".datepicker-item").datepicker("destroy");
        $('.phone').inputmask('remove');

        // 初始化日期选择器
        $.datepicker.setDefaults($.datepicker.regional['{{ app()->getLocale() }}']);
        $(".datepicker-item").datepicker({
            dateFormat: 'dd.mm.yy',
        });

        // 初始化手机号掩码
        $('.phone').inputmask({
            mask: '(99) 999 99 99',
            showMaskOnHover: false,
        });
    }

    // 页面首次加载时执行
    document.addEventListener('DOMContentLoaded', initFormPlugins);

    // Livewire 2：组件DOM更新完成后执行
    document.addEventListener('livewire:update', initFormPlugins);

    // Livewire 3：改用wire:navigated事件
    // document.addEventListener('wire:navigated', initFormPlugins);
</script>
@endpush

3. 检查组件DOM结构一致性 #

• 确保日期选择器和手机号字段的类名（datepicker-item、phone）在组件更新前后保持不变，Livewire会替换组件内的DOM元素，类名不一致会导致选择器找不到元素。
• 确认wire:model绑定的字段没有被动态修改id或class属性。

4. 移除不可靠的setTimeout延迟 #

setTimeout依赖固定延迟，无法保证DOM更新完成时间，改用Livewire官方钩子是更可靠的方案。

内容的提问来源于stack exchange，提问作者Тарас Гаврилюк