Rails Turbo Stream模板标签中隐藏输入框数量异常问题求助

云原生阿岚

2026-6-22

问题原因

核心问题在于时机不匹配：

$(document).ready仅在初始HTML页面加载完成后执行，但Turbo Stream的内容是异步渲染到DOM中的。当ready事件触发时，Turbo可能还没完成所有500个隐藏输入框的追加操作，所以统计到的是当时已渲染完成的部分元素，数量自然随机不足。
提交后参数数量和统计结果一致，是因为提交时DOM中确实只有这么多已渲染的输入框——并非Turbo Stream没发送完整内容，而是前端没等渲染完成就执行了统计/提交操作。

解决方案

方法1：监听Turbo全局渲染完成事件

替换原有的$(document).ready，改用Turbo提供的turbo:render事件——这个事件会在Turbo完成所有页面内容（包括异步加载的Turbo Stream）渲染后触发：

$(document).on('turbo:render', function() {
    const count = $("input[name='items[my_keys][]']").length;
    console.log(count);
});

原生JS写法：

document.addEventListener('turbo:render', () => {
    const count = document.querySelectorAll("input[name='items[my_keys][]']").length;
    console.log(count);
});

方法2：监听Turbo Stream加载完成事件

如果只关心Turbo Stream的内容加载，可使用turbo:stream:loaded事件，它会在每个Turbo Stream请求完成并渲染后触发：

document.addEventListener('turbo:stream:loaded', () => {
    const count = document.querySelectorAll("input[name='items[my_keys][]']").length;
    console.log(count);
});