关于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 %>");

07-24 09:50
查看更多