Rails Bootstrap 4 与 Turbolinks

Question

我有一个功能齐全的 rails 应用程序，安装了 bootstrap-rubygem (v4.3)。

在我的应用程序中，我有一个部分会在单击 remote: true link 时重新呈现。单击此 link 时，我有一个响应 JS 的控制器，然后在我的 .js.erb 视图中，我替换了特定 div.

的 html

现在，在这个局部视图中，我使用了工具提示和下拉菜单。问题是，工具提示仅在硬刷新后才有效。一旦我单击以远程重新加载部分，工具提示就会停止工作。下拉菜单的情况恰恰相反。在我点击遥控器 link.

之前它们不会工作

我在设置此 gem 时是否遗漏了任何内容，或者我可能在使用 JQuery 和 Turbolink 实施 bootstrap 的方式上犯了错误小号？

主 JS 文件：application.js

//= require rails-ujs
//= require jquery3
//= require popper
//= require bootstrap-sprockets
//= require turbolinks
$(document).on('ready turbolinks:load', function () {
  $('[data-toggle="tooltip"]').tooltip();
});

主布局文件：application.haml

!!!
%html
  %head
    %meta{:content => "text/html; charset=UTF-8", "http-equiv" => "Content-Type"}/
    %title Dummy App
    = csrf_meta_tags
    = csp_meta_tag
    = stylesheet_link_tag    'application', media: 'all', 'data-turbolinks-track': 'reload'
    = javascript_include_tag 'application', 'data-turbolinks-track': 'reload'
  %body
    #sample-wrapper= render "sample/index"
    = yield

JS 视图在 div 中呈现内容：sample/index.js.erb

$("#sample-wrapper").html("<%= j (render 'sample/index' ) %>");

带有工具提示和下拉菜单的 HAML 视图 sample/index.haml

.card
  %h1{data: {toggle: "tooltip", placement: "bottom", title: @sample.title}}= @sample.title
  .dropdown.card-options
    %button#dropdownMenu1.btn.btn-ghost.dropdown-toggle.no-caret{"aria-expanded" => "false", "aria-haspopup" => "true", "data-toggle" => "dropdown", :type => "button"}
      = fa_icon "ellipsis-h"
    .dropdown-menu.dropdown-menu-right{"aria-labelledby" => "dropdownMenu1"}
      = link_to "Edit", edit_sample_path(@sample.token), class: "dropdown-item", remote: true

Answer 1

您必须重新初始化工具提示

$('[data-toggle="tooltip"]').tooltip()

重新渲染部分后，您可以在 js.erb 文件中渲染后添加它

要使用下拉菜单解决问题，您必须在 turbolinks:load 上初始化它们，就像工具提示

Rails Bootstrap 4 与 Turbolinks

Rails Bootstrap 4 with Turbolinks

javascript

jquery

ruby-on-rails

twitter-bootstrap

turbolinks