Laravel中Ajax加载Flowbite Modal无法关闭按钮问题求助

在Laravel项目中使用Flowbite构建Modal，通过Ajax加载内容并传递数据后，Modal能正常显示，但点击顶部X按钮和底部Close按钮无法关闭，仅点击背景遮罩可触发关闭。

相关代码 #

App.js #

import "flowbite";

触发按钮 #

<button onclick="detail('{{ $id }}')" data-modal-toggle="viewProduk" type="button"
    class="rounded-l-lg border border-gray-200 bg-white px-2 py-2 text-sm font-medium text-gray-900 hover:bg-gray-100 hover:text-blue-700 focus:z-10 focus:text-blue-700 focus:ring-2 focus:ring-blue-700 dark:border-gray-600 dark:bg-gray-700 dark:text-white dark:hover:bg-gray-600 dark:hover:text-white dark:focus:text-white dark:focus:ring-blue-500">
    <i class="fa-solid fa-eye"></i>
</button>
<div id="view" class="hidden"></div>

Ajax代码 #

<script>
        function detail(id) {
            var id = id;
            var url = "{{ route('produk.show', ':id') }}";
            url = url.replace(':id', id);
            $.ajax({
                type: "get",
                url: url,
                success: function(response) {
                    if (response.data) {
                        $('#view').html(response.data).show();
                        const $targetEl = document.getElementById('viewProduk');
                        var options = {
                            closable: true,
                        };
                        var modal = new Modal($targetEl, options);
                        modal.toggle();
                    }
                }
            });
        }
</script>

控制器代码 #

public function show($id)
{
    $view = view('produk.partials.modal_viewproduk',[
        'produk' => Produk::findOrFail($id),
    ])->render();
    return response()->json([
        'data' => $view
    ]);
}

modal_viewproduk.blade.php #

<x-modal idName="viewProduk" title="Detail Produk">
    <div id="content">
        {{ $produk->kode_brg }}
        {{ $produk->nama_brg }}
    </div>
    <div>
        <button class="bg-indigo-500" data-modal-hide="viewProduk">Close</button>
    </div>
</x-modal>

Modal组件（x-modal） #

@props(['idName', 'title'])

<div id="{{ $idName }}" tabindex="-1" aria-hidden="true"
    class="fixed top-0 left-0 right-0 z-50 hidden h-[calc(100%-1rem)] max-h-full w-full overflow-y-auto overflow-x-hidden p-4 md:inset-0">
    <div class="relative max-h-full w-full max-w-2xl">
        <!-- Modal content -->
        <div class="relative rounded-lg bg-white shadow dark:bg-gray-700">
            <!-- Modal header -->
            <div class="flex items-start justify-between rounded-t border-b p-5 dark:border-gray-600">
                <h3 class="text-xl font-semibold text-gray-900 dark:text-white lg:text-2xl">
                    {{ $title }}
                </h3>
                <button type="button"
                    class="ml-auto inline-flex h-8 w-8 items-center justify-center rounded-lg bg-transparent text-sm text-gray-400 hover:bg-gray-200 hover:text-gray-900 dark:hover:bg-gray-600 dark:hover:text-white"
                    data-modal-hide={{$idName}}>
                    <svg class="h-3 w-3" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none"
                        viewBox="0 0 14 14">
                        <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                            d="m1 1 6 6m0 0 6 6M7 7l6-6M7 7l-6 6" />
                    </svg>
                    <span class="sr-only">Close modal</span>
                </button>
            </div>
            <!-- Modal body -->
            <div class="space-y-6 p-6">
                {{ $slot }}
            </div>

        </div>
    </div>
</div>

问题排查与解决方案 #

核心原因 #

1. 动态内容未绑定事件：Flowbite的Modal关闭事件仅在页面初始加载时绑定一次，通过Ajax动态插入的Modal按钮不会自动触发关闭逻辑。
2. Modal实例重复创建：每次调用detail()都会生成新的Modal实例，可能导致事件冲突或失效。
3. 属性语法不规范：Modal组件中data-modal-hide={{$idName}}未加引号，虽当前ID无特殊字符，但属于不规范写法，可能引发潜在解析问题。

解决方案 #

方案1：重新初始化Flowbite Modal

在Ajax成功回调中，插入内容后调用Flowbite的initModals()方法，重新绑定所有Modal事件：

success: function(response) {
    if (response.data) {
        $('#view').empty().html(response.data).show();
        // 重新初始化所有Modal组件
        initModals();
        // 通过触发按钮的data属性打开Modal
        const $triggerEl = document.querySelector('[data-modal-toggle="viewProduk"]');
        toggleModal($triggerEl);
    }
}

方案2：手动绑定关闭事件

创建Modal实例后，直接为关闭按钮绑定点击事件：

success: function(response) {
    if (response.data) {
        $('#view').empty().html(response.data).show();
        const $targetEl = document.getElementById('viewProduk');
        const modal = new Modal($targetEl, { closable: true });
        modal.toggle();
        
        // 为所有关闭按钮绑定隐藏事件
        document.querySelectorAll(`[data-modal-hide="viewProduk"]`).forEach(btn => {
            btn.addEventListener('click', () => modal.hide());
        });
    }
}

方案3：修复属性引号问题

修改Modal组件中关闭按钮的data-modal-hide属性，添加双引号：

<button type="button"
    class="ml-auto inline-flex h-8 w-8 items-center justify-center rounded-lg bg-transparent text-sm text-gray-400 hover:bg-gray-200 hover:text-gray-900 dark:hover:bg-gray-600 dark:hover:text-white"
    data-modal-hide="{{$idName}}">

额外优化：避免重复插入Modal

每次Ajax请求前清空#view容器，防止DOM中出现多个相同ID的Modal元素：

$('#view').empty().html(response.data).show();

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