引导弹出窗口停止工作在下一页

Bootstrap popover stops working on next page

本文关键字：一页 停止工作 窗口      更新时间：2023-09-26

我在导航栏中有一个引导弹出窗口。导航条位于main 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();
    }
});
};

请让我知道，如果我错过了什么，使弹出窗口保持持久通过网站。

我在运行一个默认指定使用turbollinks的香草Rails应用程序时遇到了这个问题。我必须让涡轮链接失效。禁用该功能的一种方法是:

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

本页声明:

从你的Gemfile中删除gem ' turbollinks '行

从app/assets/javascripts/application.js中删除//= require的涡轮链接。

删除两个"data- turbollinks -track"=比;从你的app/views/layouts/application.html.erb.

编辑

另一种方法是接受turbollinks在某些应用程序中可以有一些价值，并挂钩到它的事件模型。监听事件页面:更改并触发Bootstrap弹出窗口方法以再次刷新新绘制的弹出窗口元素。像这样的代码应该可以工作:

$(document).on('page:change', function(){
  $('[data-toggle="popover"]').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"}>
相关文章：