Turbo Frames与jQuery Append兼容问题：页面导航后脚本失效解决方案咨询

你的修改思路是正确的——Turbo Frames通过AJAX加载内容时，不会触发传统的$(document).ready事件，因此需要监听Turbo提供的专属事件，确保DOM操作在内容更新后重新执行。

可以优化代码避免重复逻辑，将共用操作抽成独立函数，提升可维护性：

function addSampleText() {
  $('#test').append('<div>Sample Text</div>');
}

// 初始页面加载时执行
$(document).ready(addSampleText);

// Turbo Frame加载完成时执行
$(document).on("turbo:frame-load", addSampleText);

如果需要覆盖所有Turbo驱动的页面更新场景（包括Turbo Drive的页面导航，不只是Frames），可以改用turbo:load事件，它会在初始加载、Turbo导航完成、Turbo Frame加载完成时统一触发：

function addSampleText() {
  $('#test').append('<div>Sample Text</div>');
}

// 覆盖所有Turbo相关的页面加载/更新场景
$(document).on("turbo:load", addSampleText);

关键事件说明 #

• turbo:frame-load：仅在单个Turbo Frame的内容加载完成时触发，适合针对性处理Frame内的DOM操作。
• turbo:load：覆盖初始页面加载、Turbo Drive页面切换、Turbo Frame加载等所有Turbo更新场景，是更通用的事件选择。

上述实现完全符合Turbo的标准事件使用规范，既能保证功能生效，也便于后续代码维护。

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