JavaScript 和 Ajax 调用

Question

我有几个关于 ajax 调用后加载 javascript 的问题。

所以我在rails上使用ruby，并且通过ajax调用加载了不同的页面(我这样做是因为我有一个音频播放器，我想在页面重新加载时继续播放)。

问题是，当我使用 ajax 更改页面时，javascript 不会在新页面上重新加载(或工作)。

例如，我有一个网格系统，它根据 JavaScript 的宽度设置网格图像的高度。除非我重新加载页面或将脚本放在 html 文件底部的脚本标记中，否则该脚本不起作用。

有什么办法可以重新加载 JavaScript 吗？我尝试过 location.reload() 但这只是刷新页面并违背了整个目的。谢谢!

这是一个例子:

show.js.erb

$('#results').html("<%= escape_javascript(render partial: 'songs/showcard', locals: { song: @song }) %>");

歌曲 Controller

  def show
    respond_to do |format|
      format.js
      format.html
    end
  end

链接到显示页面

<%= link_to song, remote: true do %><%= song.title %><% end %>

这是我正在加载名为cardSize.js的文件的cardSize函数

$(document).ready(function cardSize () {
  var cardWidth = $('.card-image').width();
  $('.card-image').css({
    'height': cardWidth + 'px'
  });
});

Answer 1

在 UJS 文件 show.js.erb 中，您需要调用控制 View /网格的全局函数。

例如，如果控制高度等的全局方法是 implement_grid()，那么，该文件应如下所示:

$('#results').html("<%= escape_javascript(render partial: 'songs/showcard', locals: { song: @song }) %>");
implement_grid();

动态添加到 DOM 的项目不一定会触发任何操作，除非您指定它们。您可以查看将监听器绑定(bind)到 div/table(网格)上的 html 修改，然后如果您不想将该代码保留在 UJS 文件中，那么这将调用您正在查找的高度更改。

此外，$('#results') 可以大大缩短:

$('#results').html("<%= j render 'songs/showcard', song: @song %>");