带有 Turbolinks 的 Rails Bootstrap 4

Question

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

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

现在在这个局部视图中，我使用了工具提示和下拉菜单。问题是，工具提示仅在硬刷新后才有效。一旦我点击远程重新加载部分，工具提示就会停止工作。下拉菜单的情况正好相反。在我单击远程链接之前，它们不起作用。

我是否在设置这个 gem 时遗漏了任何东西，或者我在使用 JQuery 和 Turbolinks 实现引导程序的方式上犯了一个错误？

主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

在 div 中渲染内容的 JS 视图：sample/index.js.erb

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

带有工具提示和下拉菜单的 HAML 视图示例/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 上初始化它们：像工具提示一样加载