Turbo Stream Append生效但页面无更新，defaultPrevented为true问题排查

问题描述 #

我正在跟随Hotwired的Turbo教程学习，进度到5分30秒处，按教程实现了以下代码：

需要更新的div：

<div class="messages">
   <%= render @room.messages %>
</div>

MessagesController的create方法：

def create
    @message = @room.messages.create!(message_params)

    respond_to do |format|
      format.turbo_stream
      format.html { redirect_to room_url(@room) }
    end
  end

messages/create.turbo_stream.erb文件内容：

<%= turbo_stream.append "messages", @message %>

提交新消息后页面无任何变化，但后端日志显示请求处理正常，数据库已插入数据，且网络响应返回了正确的turbo-stream内容：

<turbo-stream action="append" target="messages"><template>  <p id="message_50">
    26 Mar 20:37: 123
  </p>
</template></turbo-stream>

通过监听turbo:before-fetch-response事件发现defaultPrevented为true，调试时看到Turbo内部代码中调用了event.preventDefault()。尝试过显式指定partial渲染、修改div的唯一ID等方法，问题仍未解决，请问该如何排查？

排查与解决步骤 #

1. 修正目标元素的ID匹配（核心可能问题） #

Turbo Stream的target参数匹配的是元素的**id属性**，而非class。你当前的div仅设置了class="messages"，Turbo无法找到目标元素，因此内部阻止了响应处理。

将div修改为：

<div id="messages">
  <%= render @room.messages %>
</div>

2. 验证Turbo Stream的响应头 #

检查浏览器网络面板中Turbo Stream响应的Content-Type，必须为text/vnd.turbo-stream.html（含字符编码）。如果后端返回的是text/html或其他类型，Turbo会拒绝处理并阻止响应。

3. 检查Turbo的加载与初始化 #

• 在浏览器控制台执行Turbo，确认能正常返回Turbo对象，说明Turbo.js已正确加载。
• 检查控制台是否有JS报错，比如其他脚本干扰了Turbo的事件逻辑。

4. 排查表单的Turbo属性 #

• 确认提交表单未设置data-turbo="false"（默认Turbo会处理表单提交，手动关闭会导致无法触发Turbo Stream）。
• 如果表单嵌套在Turbo Frame中，添加data-turbo-frame="_top"属性，避免Frame范围限制影响Stream处理。

5. 开启Turbo调试日志 #

在浏览器控制台执行：

Turbo.setDebug(true)

重新提交表单，查看控制台输出的Turbo调试信息，会明确提示响应被阻止的具体原因（比如目标元素不存在、Content-Type错误等）。

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