Question

我在导航栏中遇到Bootstrap popover时遇到问题。导航栏位于主application.html.erb中。它一旦页面加载就可以工作，但是一旦我移动到另一个页面，popover就会停止工作，直到再次刷新网站。这是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();
    }
});
};

如果我遗漏了某些内容，请告诉我，以便popover在网站上保持不变。

Answer 1

我在运行默认情况下指定使用turbolinks的vanilla Rails应用时出现此问题。我不得不禁用turbolinks。禁用该功能的一种方法是：

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

此页面说明：

移除宝石＆＃39; turbolinks＆＃39;来自Gemfile的行。

从app / assets / javascripts / application.js中删除// = require turbolink。

删除两个＆＃34; data-turbolinks-track＆＃34; =＆GT;来自app / views / layouts / application.html.erb的真正哈希键/值对。

修改

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

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

Answer 2

如果您使用的是Turbolink，则始终可以在加载时使用弹出窗口

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

可能比仅基于页外更改触发它更具体。

然后您可以在按钮上调用它

<button class="btn navbar-btn btn-primary" id="popoverFriends"
  data: {toggle= "popover" placement="bottom" trigger="focus"}>

Bootstrap popover停止在下一页

2 个答案: