logo标签列表

当我从链接访问页面时，JavaScript 第一次不会执行

javascriptruby-on-railsturbolinks
10

我在我的Rails应用程序中有一个模板，第一次通过我的主页上的链接加载时不会执行JavaScript代码。只有当从链接访问它并且仅在第一次访问时才会发生这种情况。我不知道为什么会出现这种情况。有什么帮助吗？以下是代码。

主页：

#app/views/static_pages/home.html.erb
#...
<%= link_to "Nofify an absence", new_cancellation_path %>

这是JavaScript文件：

//app/assets/javascripts/cancellations_new.js

var validateDateTime = function(){
// some other code that returns true or false
  }
  $(document).ready(function(){
    $("#new_cancellation").submit(function(event){
      event.preventDefault();
      if (validateDateTime()) {
        alert("Some alert");
      }
      else { 
        // some more code 
      }
    }); 
  });

JavaScript 应该执行的模板：

#app/views/cancellations/new.erb

<%= provide(:title, "Notify an absence")%>
<div class="row">
<div class="span3 offset4">
  <h3> Notify an absence </h3>

  <%= form_for @cancellation, :id => "new_cancellation" do |f| %>
    <%= render 'shared/error_messages' %>
    <% # some form elements...%>
    <%= f.submit "Send", class: "btn btn-primary"%>        
  <% end %>
</div>
</div>

我已经尝试将 //= require cancellations_new 添加到 app/assets/javascripts/application.js，但没有改进。

编辑

我进行了一些研究，遵循@radubogdan的建议，我发现Turbolinks导致JavaScript的“奇怪”行为。如果您在应用程序中激活了Turbolinks，则会从Ajax请求中加载元素，然后使用内容修改HTML的。由于DOM加载方式不是通常的方式，因此写在 $(document).ready(){...} 中的代码除非完全重新加载页面（例如刷新浏览器），否则不起作用。如果您希望JavaScript像往常一样运行，则可能需要将

$(document).ready(){...}

更改为

$(document).on("page:change", function() { // some more code. });

您可以在这里
了解更多有关此主题的信息。

你是否已经激活了Turbolinks？ - radubogdan
没有使用Turbolinks时，行为是相同的。 - felix
嗨@felix。有时候，Rails太神奇了，解决这类问题会花费你很多时间。我很高兴它已经解决了。 - radubogdan
@radubogdan，我意识到我没有解决问题。所以我跟随你的建议，研究了Turbolinks，确实是导致Javascript无法工作的原因。非常感谢你的帮助。如果你想发布答案，我会接受它作为正确答案。同时，对我的问题点个赞也不会伤害任何人。我在这里还很新。谢谢。 - felix
是的，你真的很努力地修复了这个问题，我很高兴能帮到你。我会给你点赞的。 - radubogdan
显示剩余2条评论
2个回答
6
我认为turbolinks是问题所在。你试过将其停用吗？
从application.js和layout.html.erb中删除它，其中你使用stylesheet链接标签。
如果没有turbolinks也能正常工作，则应该检查如何使用$(document).on('page:load', .....) 谢谢
4

只需在您的application.html.erb中添加即可。

<body data-no-turbolink="true" >
  # your content
</body>

或者

将以下内容添加到您的Gem文件中

gem 'jquery-turbolinks'

两者都能按照您的期望工作。
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接