javascript - 将 SVG 附加到 DOM 不起作用 - 重新加载 Assets 管道?

标签 javascript jquery ruby-on-rails dom svg

我在 Assets 管道中有 javascript,可以与特定 View 上的特定 DOM 元素进行交互。例如:

# app/assets/javascripts/book.js
...
var svg = d3.select("#book").append("svg")
...

我的看法 /pages/book看起来像:

<% content_for :head do %>
  <%= javascript_include_tag 'd3' %>
<% end %> 
<h1>Book</h1>
<div id="book"></div>
<% content_for :body do %>
  <%= javascript_include_tag 'book' %>
<% end %>

我的assets.rb有:

Rails.application.config.assets.precompile += %w( d3.js )
Rails.application.config.assets.precompile += %w( book.js )

当我访问localhost:3000/pages/book时它完美工作,SVG绑定(bind)到 #book

当我从 root 开始时 localhost:3000并点击链接<%= link_to "See Book", pages_book_path %> ,DOM 元素存在,HTML渲染,但是 SVG不绑定(bind)到#book .

在终端中查看,当我直接转到 localhost:3000/pages/book 时 Assets 管道已加载并且 JavaScript 正确执行。当我从 root 开始时,同样的事情发生了,但是自从 #book root 上不存在查看,没有任何反应...当我点击链接时, Assets 管道不会重新加载...

当链接被点击时,如何让资源管道重新加载?

最佳答案

您需要确保您的 javascript 资源代码包装在 jquery 页面 readypage:load 中,如下所示:

$(document).on('ready page:load', function () {
  var svg = d3.select("#book").append("svg")
});

我相信涡轮链接是罪魁祸首,附加到#book的代码是在#book出现之前运行的,就像你所说的那样。为了让它在您访问该页面时运行,我想说上面的内容应该适合您。

更新:

如果您尝试嵌入 svg,可以使用 gem 和自定义方法。我在网上搜索了 2 分钟就找到了这四个来源,因此您可能会遇到更好的东西,它们可能会满足您的需要。不过我会从这里开始:

关于javascript - 将 SVG 附加到 DOM 不起作用 - 重新加载 Assets 管道?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/32893304/

相关文章:

javascript - 动态创建的元素上的事件绑定(bind)?

javascript - 响应式地包裹和展开 div

javascript - 无限滚动重复ajax调用

Javascript if else 条件无法正常工作

javascript - 使用 window.onload 滚动到特定 div,而不添加网址

javascript - 为什么 Wordpress 核心数据存储中缺少选择器

jquery - 添加类时使用 .each 添加延迟

ruby-on-rails - 让 Rails #destroy_all 运行得更快

ruby-on-rails - 如果图像不存在则显示默认用户图像(ruby on rails)

ruby-on-rails - 当 Rails Mailer 发送电子邮件时,是什么导致文件结束错误?