Question

我在页面部分提到2，因为如果一个正在工作，那么初始化它的JS必须正常工作。 FWIW以防万一，我试图在JS的popover追加上方添加初始化代码，但没有效果。

不能正常工作

HTML生成：

<span class="glyphicon glyphicon-question-sign question-icon cursor-point" data-toggle="popover" data-trigger="focus" data-content="An initial deposit (calculated per item) is required if your trip is longer than 14 days or if any of your rental dates overlap Burning Man. This deposiit will be refunded in accordance with our Terms of Service" tabindex="0"></span>

由JS动态地如此：

$(some_element).append('<td><span class="glyphicon glyphicon-question-sign question-icon cursor-point" data-toggle="popover" data-trigger="focus" data-content="An initial deposit (calculated per item) is required if your trip is longer than 14 days or if any of your rental dates overlap Burning Man. This deposiit will be refunded in accordance with our Terms of Service" tabIndex="0"></span></td>')

工作弹出

生成的HTML

<div class="col-xs-12 cloudinary-div text-center" style="height: 150px" data-toggle="popover" data-trigger="focus" data-content="Example shown: RED Avid helmet." tabindex="0" data-original-title="" title="">

从视图文件中如下：

<div class="col-xs-12 cloudinary-div text-center" style="height: 150px" data-toggle="popover" data-trigger="focus" data-content="<%= i.description %>" tabindex="0">

在我看来，基于生成的HTML，唯一的区别是工作的人有data-original-title=""和title=""。但是，将其添加到非工作状态并没有帮助。

您可以在实际网站上看到它：www.lastmingear.com/request - 在屏幕左侧，单击任何类别，然后将弹出项目。单击任何项目以查看WORKS的弹出窗口。 - 要查看不工作的popover，请将更改请求的日期超过14天，在右侧购物车表中，您会看到可退款存款的订单项。该订单项旁边是问号图标。这就是popover。点击它没有＆＃39;做任何事情

Answer 1

Clayton在添加新范围之前调用popover是正确的。但是在我的代码中，在每次添加它之后调用它会有点难看，所以相反，我只是添加了这个函数来点击时初始化popover。

$(document).on('click','[data-toggle="popover"]', function() {
  $("[data-toggle='popover']").popover({
    container: 'body'
  });
})

好的说得太早了，上面的答案只有在弹出窗口旁边的某个地方点击才能工作，然后点击弹出窗口。现在......显然原因似乎是它第一次点击它会调用初始化函数，但之后无法立即激活它，因此它第二次点击它作品。除了最初工作的弹出窗口在第一次单击时工作，原来不工作的弹出窗口需要双击。

与此同时，由于在我真正简单的网站上并没有真正的速度问题，我只是使用下面的内容，因为基本上任何带有弹出窗口的元素只能在我的网站上通过点击页面上的某个位置：

$(document).on('click',  function() {
  $("[data-toggle='popover']").popover({
    container: 'body'
  });
})

Answer 2

我知道很久以前就有人问过这个问题，但我也遇到了这个popover 问题。虽然我的问题情况有点不同，但它可能对其他人有帮助。

在我的情况下，当 DOM 准备就绪时，我正在初始化弹出框，如下所示：

    $(document).ready(function () {
      $('[data-toggle="popover"]').popover({
         placement: 'top',
         container: 'body'
      });
    });

我在我的主表中使用 datatables，其中有几页 - buttons 中出现在第一页中的所有弹出框都完美无缺。现在，当我移动到其他页面时，这些行中的弹出窗口不起作用。我相信数据表会从 DOM 中删除不可见的行，并且当 DOM 仅针对可见行准备好时会发生弹出窗口初始化（上面的代码块）-将不可见的行留在另一个表中没有对其弹出框进行初始化的页面。

每次点击表格的不同页码时，我首先想到的是初始化弹出窗口（如上面的代码块） - 这样，每个弹出窗口总是有效。然而，这个问题是这不会是防弹的，因为在数据表中，可能会出现第 8 页中的数据行（我没有点击过，因此没有为该页行初始化弹出框） ) 可以直接到第 1 页，因为过滤了表头的任何列。

此外，在此之后，我使用了@James 的代码块，其中我需要单击两次才能使弹出窗口工作，这也是一个解决方案，但对我的情况不可行。

我的弹出框在被点击而不是悬停时会做出反应，因此我认为在以下解决方案中（效率不高，但这是它在我的情况下工作的唯一方法）-当网页的用户点击时获取弹出框的按钮，我只是想在点击之前发生的前一个事件中，在这种情况下是 onmouseover。这样，每次用户检索数据行时，无论何时添加按钮弹出框，它都会在被点击之前进行初始化。

$(document).on('mouseover', "[data-toggle='popover']", function (event) {
    $('[data-toggle="popover"]').popover({
        placement: 'top',
        container: 'body'
    });
});

请注意，以这种方式，使用最后一个代码块，在 DOM 的就绪事件（第一个代码块）上初始化弹出框是无用的。

Bootstrap：页面上有2个弹出窗口，只有1个正在运行

2 个答案: