Bootstrap popover 在下一页停止工作答案

【问题标题】：Bootstrap popover stops working on next pageBootstrap popover 在下一页停止工作
【发布时间】：2015-12-21 07:06:09
【问题描述】：

我的导航栏中的 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();
    }
});
};

如果我遗漏了什么，请告诉我，以便弹出框在网站中保持持久。

【问题讨论】：

检查这个：stackoverflow.com/questions/17881384/…

标签： javascript ruby-on-rails twitter-bootstrap

【解决方案1】：

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

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

此页面声明：

从您的 Gemfile 中删除 gem 'turbolinks' 行。

从您的 app/assets/javascripts/application.js 中删除 //= 需要 turbolinks。

从您的 app/views/layouts/application.html.erb 中删除两个“data-turbolinks-track” => 真正的哈希键/值对。

编辑

另一种方法是接受 Turbolinks 在某些应用程序中可能具有一些价值，并与它的事件模型挂钩。监听事件页面：更改并触发Bootstrap popover方法再次刷新新绘制的popover元素。像这样的东西应该可以工作：

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

【讨论】：

或者您可以在指向包含弹出窗口的页面的链接上禁用涡轮链接。
@moeabdol 这是一种有趣的方法。我觉得一旦我有选择地禁用一个对页面操作如此重要的功能，它可能会变得混乱。就我个人而言，我在 turbolinks 上遇到的问题一直没有完结，尤其是当我做了很多把手渲染数据和引导的事情时，它们似乎在缺乏来自 turbolinks 的事件的情况下表现不佳。
我了解@Phil ...是的，完全禁用 turbolinks 可能会更干净、更容易，但您必须记住，turbolinks 将继续存在。 Rails 4 默认包含 turbolinks，Rails 5 将遵循相同的脚步。最好习惯 turbolinks :)
@moeabdol - 你可能是对的。虽然我觉得他们曾经说过原型！认识到这一点，我编辑了我的回复，以尝试与 Turbolinks 很好地配合使用。
@Chris - 很高兴听到这个消息。您最终使用了哪种方法（禁用 turbolinks 或使用 page:change 事件？）。如果您有时间，请将此答案标记为已接受。

【解决方案2】：

如果你使用的是 turbolinks，你总是可以在加载时使用 popover

$(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"}>

【讨论】：