当表单出现验证错误时，rails bootstrap popover 停止工作

Posted 2023-02-15

【中文标题】当表单出现验证错误时，rails bootstrap popover 停止工作

【英文标题】：rails bootstrap popover stops working when form has validation errors

【发布时间】：2021-09-13 16:52:32

【问题描述】：

我在 Rails 6 上使用 Bootstrap 5。我有一个使用引导弹出框的表单，当表单出现错误时，Rails 验证将阻止它被提交，并且在出现验证错误时弹出框不再起作用。我尝试使用 jQuery 进行测试，得到了相同的结果。

我知道这是因为我调用了$(function() .... 和document.addEventListener("DOMContentLoaded", function(event) ... ，以便让弹出框在表单加载时初始化和工作。 但如果表单出现错误，我不确定如何再次显示弹出框。

import * as bootstrap from 'bootstrap'

// bootstrap popover's
document.addEventListener("DOMContentLoaded", function(event) 
  var popoverTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="popover"]'))
  var popoverList = popoverTriggerList.map(function (popoverTriggerEl) 
    return new bootstrap.Popover(popoverTriggerEl)
  )
);

jQuery 测试也只在表单提交错误之前有效。

$(function()
  $("p").hover(function()
    $(this).css("background-color", "red");
    , function()
    $(this).css("background-color", "blue");
  );
);

【参考方案1】：

对我来说这似乎是一个绑定问题，请尝试使用 body 绑定事件

$("body").on("hover", "p", function()
  // remaining code
);