javascript - 如何在 Bootstrap 下拉列表中创建 Bootstrap 弹出窗口？

Question

到目前为止，我是使用 html、bootstrap 和 jQuery v1.12.0 以及 jQuery UI - v1.10 创建的。到目前为止，显示的是一个显示“菜单”的按钮。单击该按钮后，菜单将下拉并显示一个右对齐的框，上面写着“Popover with data-trigger”。一旦发生这种情况，我希望能够单击“带数据触发的弹出窗口”按钮以使用 Bootstrap 弹出某些内容。我尝试使用 onclick 的东西，如 jquery 中所示，但它不起作用。我做错了什么？

$(".dropdown-menu").css('margin','50px');
$(function () {
  $('[data-toggle="popover"]').popover()
})
$("#popoverData").popover({ trigger: "hover" });

<div class="btn-group" style ="left:1860px;top:-140px;">
  <button type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    Menu
  </button>
  <div class="dropdown-menu dropdown-menu-right" style="background: rgba(0,0,255,.35);">
    <a id="popoverData" class="btn" href="#" data-content="Popover with data-trigger" rel="popover" data-placement="bottom" data-original-title="Title" data-trigger="hover">Popover with data-trigger</a>
  </div>
</div>

Answer 1

实际上，我找到了答案...问题是我有正确的代码...我忘了放 $(document).ready(function() {});围绕我的弹出窗口代码，所以代码不会运行。我认为这与 DOM 未准备好有关？如果我错了，请纠正我。此代码应该适用于 jquery。

$(document).ready(function() {
    $(".dropdown-menu").css('margin','50px');
    $(function () {
        $('[data-toggle="popover"]').popover()
    })
    $("#popoverData").popover({ trigger: "hover" });
});