如何让Ajax随表单输入/选框变更触发？当前仅执行一次的问题解决

你的代码只能运行一次的核心问题是：ajax请求成功后，你用$('body').html(data)替换了整个页面的body内容，原来的#formMenu元素被新内容覆盖，之前绑定在它身上的事件监听也跟着失效了，所以后续的输入或选择操作没法触发ajax请求。

修复方案：用事件委托绑定事件 #

把事件绑定到不会被替换的父元素（比如body）上，通过事件委托监听#formMenu的操作，这样即使表单被替换，事件依然能正常触发。同时要把表单的当前数据传给后端，不然每次请求都是相同的，搜索结果不会变化：

// 事件委托绑定到body，监听#formMenu的keyup和change事件
$('body').on('keyup change', '#formMenu', function() {    
    $.ajax({
        url: '/calendar',
        // 序列化表单数据，把当前的搜索条件传给后端
        data: $(this).serialize(),
        success: function( data ) {
            $('body').html(data);
        },
        // 可选：添加错误处理，避免请求失败无反馈
        error: function(xhr, status, error) {
            console.error('搜索请求失败:', error);
            // 这里可以给用户显示错误提示，比如$('.error-tip').text('搜索出错了，请重试')
        }
    });
});

优化建议：添加防抖逻辑 #

如果用户快速输入字符，上面的代码会频繁发送ajax请求，既浪费资源也可能导致后端压力大。可以加个防抖，等用户停止输入300毫秒左右再发请求：

let debounceTimer;
$('body').on('keyup change', '#formMenu', function() {    
    // 清除上一次的定时器
    clearTimeout(debounceTimer);
    // 延迟300毫秒执行请求，可根据需求调整时长
    debounceTimer = setTimeout(() => {
        $.ajax({
            url: '/calendar',
            data: $(this).serialize(),
            success: function( data ) {
                $('body').html(data);
            },
            error: function(xhr, status, error) {
                console.error('搜索请求失败:', error);
            }
        });
    }, 300);
});

注意事项 #

• 确保后端的/calendar接口能正确接收你通过data传递的表单参数，并返回对应的搜索结果
• 替换body内容后，新页面里的#formMenu元素结构要和原来一致，否则事件委托可能无法生效

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