我在一个rails 7应用程序中工作,当点击一个元素时,引导弹出框应该会出现。它一直在工作,直到我添加了一个带有提交按钮的表单。之后,元素在点击提交按钮后不会“弹出”(但在刷新后工作)。我想知道为什么会发生这种情况,以及如何解决它。
应用程序相当大,所以我试图在出现问题的地方创建一个简单的应用程序。我将描述创建应用程序的所有步骤和文件的内容:
1.版本:
ruby -v ruby 3.0.0p0(2020-12-25 revision 95aff21468)[x86_64-linux] rails -v Rails 7.0.4.3
1.创建应用程序
rails new popover --css=引导
1.进入
CD弹出框
1.发电控制器
料箱/轨道g控制器测试动作
1.文件app/javascript/application.js
import "@hotwired/turbo-rails"
import "./controllers"
import * as bootstrap from "bootstrap"
let popoverTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="popover"]'))
let popoverList = popoverTriggerList.map(function (popoverTriggerEl) {
return new bootstrap.Popover(popoverTriggerEl) })
var tooltipTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="tooltip"]'))
var tooltipList = tooltipTriggerList.map(function (tooltipTriggerEl) {
return new bootstrap.Tooltip(tooltipTriggerEl) })
1.文件app/controllers/test_controller.rb
class TestController < ApplicationController
def action
grr = params[:grr].present? ? params[:grr] : nil
end
end
1.文件app/views/test/action.html.erb
<div id="some-id">
<%= form_tag('action', :method => "get") do %>
<fieldset class="">
<legend class="">Type Something</legend>
<div class="form-group">
<div class="form-group">
<%= label_tag "GRR: ", nil, class: "col-lg-2 col-form-label" %>
<%= text_field_tag :grr, nil, class: "col-lg-4" %>
</div>
<%= submit_tag "Submit", class: "col-lg-2 btn btn-primary " %>
</div>
</fieldset>
<%end%>
<%= generate_popover %>
Popover一直工作,直到您单击提交按钮。刷新页面后再次工作。
1.文件app/helpers/test_helper.rb
module TestHelper
def generate_popover
button_tag("click me to popover message",
data: { bs_toggle: 'popover',
bs_html: 'true',
bs_content: "Popover Msg" })
end
end
我想知道是什么原因造成了这个问题以及如何解决它。
1条答案
按热度按时间u0sqgete1#
如果这个前提是正确的:
以及:
当按下提交按钮时,表单为:
其中任何一个正在发生的,它是打破 Bootstrap 的
eventListener
正在等待按钮点击。刷新页面会重新加载bootstrap的JS,
eventListener
会重新建立,按钮会再次按预期工作。修复有点棘手,但是您必须找到一种方法来防止eventListener被破坏,或者在表单提交之后强制重新建立
eventListener
。我首先要尝试的是,尤其是如果我不关心 AJAX 与GET,是切换我的表单的远程设置:
如果其中一个解决了问题,我会称之为胜利,然后继续前进。比用JS容易多了。