我有几个关于在ajax调用后加载javascript的问题。
所以我在轨道上使用 ruby，并且我通过 ajax 调用加载了不同的页面（我这样做是因为我有一个音频播放器，我想在页面重新加载时继续播放）。
问题是，当我使用 ajax 更改页面时，javascript 不会在新页面上重新加载（或工作）。
例如，我有一个网格系统，它使用 javascript 根据宽度设置网格图像的高度。除非我重新加载页面或将脚本放在 html 文件底部的脚本标记中，否则脚本不起作用。
有没有办法重新加载javascript？我已经尝试过location.reload（），但这只会刷新页面并破坏整个目的。谢谢！
下面是一个示例：
显示.js.erb
$('#results').html("<%= escape_javascript(render partial: 'songs/showcard', locals: { song: @song }) %>");
songs_controller
def show
respond_to do |format|
format.js
format.html
end
end
链接到显示页面
<%= link_to song, remote: true do %><%= song.title %><% end %>
这是我正在加载一个名为cardSize的文件的cardSize函数.js
$(document).ready(function cardSize () {
var cardWidth = $('.card-image').width();
$('.card-image').css({
'height': cardWidth + 'px'
});
});
在 UJS 文件show.js.erb中，您需要调用控制视图/网格的全局函数。
例如，如果用于控制高度等的全局方法是 implement_grid() ，则文件应如下所示：
$('#results').html("<%= escape_javascript(render partial: 'songs/showcard', locals: { song: @song }) %>");
implement_grid();
动态添加到 DOM 的项不一定会触发任何操作，除非您指定它们。您可以查看将侦听器绑定到div/table（网格）上的 html 修改，如果您希望将该代码保留在 UJS 文件之外，这将调用您正在寻找的高度变化。
此外，该$('#results')可以大大缩短：
$('#results').html("<%= j render 'songs/showcard', song: @song %>");
您遇到的问题似乎与涡轮链接有关。Turbolinks将刷新/更改文档<body>标签中的内容，而不是文档<head>标签中的脚本和样式表，这是Rails加载所有自定义编写的javascript的地方。
那么，当您将javascript粘贴到文件底部的<script>标签中时，为什么它会起作用呢？因为当您这样做时，<script>标签现在位于文档的<body>标签内。因此，当您更改页面时，脚本会重新加载，并且可以将事件处理程序正确绑定到页面上的 DOM 元素。
那么为什么它只有在您完全重新加载页面时才有效呢？因为你的jquery被包装在$(document).ready(...)中。当您手动刷新整个页面时，turbolinks 也会完全刷新并重新加载回 DOM 中，因此当您在该特定页面上时，您的$(document).ready(...)处理程序将正确绑定。但是，当您更改页面并且内容更改时，文档在技术上仍已准备就绪，并且不会绑定到该新页面，因此它不会执行其内部的代码。为什么？由于 turbolinks 的工作原理，整个页面在技术上不会重新加载，只是 <body> 标记中的内容，对于$(document).ready(...)调用中的代码来说，这些内容看起来像是动态生成的内容，无法绑定到。
那么有什么解决办法呢？
这可能要求也可能不需要使用 jquery turbolinks gem。这将允许您保留涡轮链接，并在每次更改页面时进行$(document).ready(...)调用。