jquery 仅在我刷新页面以切换 rails 应用程序时有效

Question

在我的 Rails 应用程序上显示 div 的一部分的切换操作仅在我刷新页面时有效。如果我点击页面上的 link，所有的开关都已经打开并且不会对点击做出反应。任何帮助将不胜感激！另外，如果有人有关于如何使用 Capybara 进行测试的提示，那就太好了。

这个在我的app/assets/javascripts

$(document).ready(function(){
  $(".donation-time").hide()
  $(".donation-candidate").on("click", function(event){
    $(this).siblings().first().toggle();
    $("span", this).toggleClass("glyphicon-chevron-right glyphicon-chevron-down");
  })
})

这是我对正在使用的视图的部分，它是完全打开和可见的部分，而不仅仅是点击页面后可见的 .donation-candidate。

<div class="donation-candidate">
  <h3><span class="glyphicon glyphicon-chevron-right"></span> <%= candidate_issue.name %></h3>
  <div style="margin-left: 32px;"><h4><%= candidate_issue.stance %></h4></div>
</div>


<div class="donation-time">
  <div style="margin-left: 32px;">
    <%= form_for Donation.new, url: donations_path do |f| %>
      <%= f.label :amount %>
      <%= f.hidden_field :candidate_issue_id, value: candidate_issue.id %>
      <%= f.number_field :amount, in: 1.0..2700.0, step: 1.0 %>
      <%= f.hidden_field :issue_id, value: candidate_issue.issue_id %>
      <%= f.submit "Donate" %>
    <% end %>
  </div>
</div>

第一次使用 jquery 或 javascript，所以不太确定去哪里找。如果您有关于如何使用水豚进行测试的提示，那就太好了。我在场景中包含了 js: true 并将 selenium 作为 gem，但我不确定单击打开 div 需要做什么，因为它显然不是按钮或 link .谢谢！

Answer 1

您在使用 turbolinks 吗？ $(Document).ready() 需要使用 turbolinks 的解决方法，如本 post use document ready with turbopinks

中所述

Answer 2

听起来您的应用程序中可能有 turbolinks https://github.com/rails/turbolinks。 Turbolinks 通过 Ajax 请求下一页然后替换页面主体来加速页面加载。这意味着脚本不必重新解析等。这也意味着 .ready 函数不会再次执行。您可以将您的 $(document).ready 更改为

$(document).on('page:change', function(){
  ...
})

如果您的函数是幂等的，否则您可能需要 page:load（阅读 turbolinks 文档以获取有关每种事件何时触发的详细信息），或者您可以安装 jquery-turbolinks 或者您可以禁用 turbolinks。

要进行测试，您可以单击带有

的元素

find(:css, '.donation-candidate').click

如果您将 :css 作为 Capybara

中的默认值，则可能不需要 :css

jquery 仅在我刷新页面以切换 rails 应用程序时有效

jquery only works when I refresh the page for toggle for rails app

html

javascript

jquery

ruby-on-rails

capybara