Laravel中Ajax分页或搜索后操作按钮功能失效问题

问题现象 #

Laravel项目中，首页执行搜索操作后，操作按钮的下拉菜单功能失效；切换到第二分页页面时，该操作按钮同样无法正常工作。

相关代码 #

首页Blade模板代码 #

<a href="#" class="btn btn-primary btn-active-primary btn-sm"
    data-kt-menu-trigger="click" data-kt-menu-placement="bottom-end">   
  {{ __('actions') }}

  <span class="svg-icon svg-icon-5 m-0">
     <svg xmlns="http://www.w3.org/2000/svg" width="24"></svg>
  </span>
</a>

<div class="menu menu-sub menu-sub-dropdown menu-column menu-rounded 
    menu-gray-600 menu-state-bg-light-primary fw-bold fs-7 w-125px py-4"
    data-kt-menu="true">
    <div class="menu-item px-3">
        <a href="{{ route('index.show', $index->id) }}" class="menu-link px-3"> 
           {{ __('View Details') }}
        </a>
    </div>
</div>

路由配置 #

Route::prefix('example')->name('examples.')->group(function () {
    Route::get('', [ExampleController::class, 'index'])->name('index');
});

前端Ajax脚本 #

$(document).on("click", "#pagination a, #search_btn, #reset_btn", function() {
    if(this.id == 'reset_btn'){
        $("#searchform")[0].reset();
    }
    $.ajax({
        url: this.dataset.url,
        type: 'get',
        data: $("#searchform").serialize(),
        processData: false,
        cache: false,
        contentType: false,
        success: function(data) {
            $("#pagination_data").html(data);
            // 重新初始化KT菜单
            KTMenu.createInstances();
        },
        failure: function (response) {
            alert(response.responseText);
        },
        error: function (response) {
            alert(response.responseText);
        }        
    });
});

问题原因与修复方案 #

原因分析 #

页面初始加载时，KT菜单组件会对现有DOM元素完成事件绑定，但通过Ajax动态加载的搜索结果、分页内容属于新插入的DOM，这些元素的菜单事件没有被重新初始化，导致按钮功能失效。另外原脚本中的表单重置代码存在错误，jQuery对象本身没有reset()方法。

修复要点 #

1. 修正表单重置逻辑：将$("#searchform").reset()改为$("#searchform")[0].reset()，调用原生DOM元素的重置方法。
2. 重新初始化菜单组件：在Ajax请求成功并更新页面内容后，添加KTMenu.createInstances()，重新扫描并初始化所有带有data-kt-menu属性的组件，确保新加载的按钮能正常触发下拉菜单。

内容的提问来源于stack exchange，提问作者Babur Shah Sayer