关于ajax调用后加载javascript的几个问题。
因此,我在轨道上使用ruby,并且通过ajax调用加载了不同的页面(这样做是因为我有一个音频播放器,我想在重新加载页面时继续播放)。
问题是,当我用ajax更改页面时,javascript不会在新页面上重新加载(或工作)。
例如,我有一个网格系统,它使用javascript根据宽度设置网格图像的高度。除非我重新加载页面或将脚本放在html文件底部的script标记中,否则脚本将无法工作。
有什么办法可以重新加载javascript吗?我尝试过location.reload(),但这只是刷新页面并破坏了整个目的。谢谢!
这是一个例子:
show.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 %>");