javascript - Bootstrap Popover停止在下一页上工作

我的导航栏中的Bootstrap弹出式窗口出现问题。导航栏位于主application.html.erb中。加载页面后它就可以工作，但是一旦我移到另一个页面上，弹出窗口就会停止工作，直到再次刷新该站点为止。这是html / ruby​​：

<button class = "btn navbar-btn btn-primary" id="popoverFriends" data-placement = "bottom" data-trigger="focus">Workplace Proximity Acquaintances <span class="badge"><%= @user.pending_friends.count %></span></button>

<div id="popoverFriendsHiddenContent" style="display: none">
    <% unless @user.pending_friends.empty? %>
    <% @user.pending_friends.each do |u| %>
    <h3 class="text-center"><%= link_to u.username, user_path(u.id) %>
        <%= link_to 'YAY!', user_friend_path(:user_id => current_user, :friend_id => u), class: "btn btn-warning", :method => :put, :confirm => 'Accept friend request! Are you sure?' %>
        <%= link_to 'No.', user_friend_path(:user_id => current_user, :friend_id => u), class: "btn btn-danger", :method => :delete, :confirm => 'Reject friend request! Are you sure?' %>
        <% end %>
        <% else %>
        None :(
        <% end %>
    </h3>
</div>
<div id="popoverFriendsHiddenTitle" style="display: none">
    <h3>Your requests: </h3>
</div>
</div>

和.js

$(document).ready(main)
var main = function(){
 $('[data-toggle="popover"]').popover()
 $("#popoverFriends").popover({
    html : true,
    content: function() {
      return $('#popoverFriendsHiddenContent').html();
    },
    title: function() {
      return $('#popoverFriendsHiddenTitle').html();
    }
});
};

如果我遗漏了一些东西，请告诉我，以使弹出窗口在整个网站上保持不变。

最佳答案

在运行默认指定使用Turbolink的Vanilla Rails应用程序时遇到了这个问题。我不得不禁用涡轮链接。禁用功能的一种方法是：

http://blog.steveklabnik.com/posts/2013-06-25-removing-turbolinks-from-rails-4

该页面指出：


  从您的Gemfile中删除gem'turbolinks'行。
  
  从您的app / assets / javascripts / application.js中删除// = require涡轮链接。
  
  从您的app / views / layouts / application.html.erb中删除两个“ data-turbolinks-track” =>真正的哈希键/值对。


编辑

另一种方法是接受Turbolinks在某些应用程序中可以具有某些价值，并加入其事件模型。监听事件页面：更改并触发Bootstrap popover方法以再次刷新新绘制的popover元素。这样的事情应该起作用：

$(document).on('page:change', function(){
  $('[data-toggle="popover"]').popover();
});

关于javascript - Bootstrap Popover停止在下一页上工作，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/32748463/