Bootstrap popover类在javascript生成的内容上无法正常工作

Bootstrap popover class not working properly on javascript generated content

本文关键字：常工作 工作 javascript 类在 popover Bootstrap      更新时间：2023-09-26

我想创建一个具有固定高度的选择（完成），并在悬停在选项上时显示弹出窗口。

首先，我使用插件创建了一个select：http://silviomoreto.github.io/bootstrap-select/

这很好，下面是到目前为止的代码：

<select id="selectUse" class="form-control selectpicker" name="selectUse"
                                    style="height: auto;">
     <optgroup label="OptGroup One">
          <option value="value">Option</option>
          <option value="value">Option</option>
          <option value="value">Option</option>
          <option value="value">Option</option>
          <option value="value">Option</option>
          <option value="value">Option</option>
          <option value="value">Option</option>
          <option value="value">Option</option>
          <option value="value">Option</option>
     </optgroup>

一切都很好。

然后我想从Bootstrap添加popover类：http://getbootstrap.com/javascript/#popovers

下面是我在jQuery中要做的：

$(document).ready(function() {
    $('.selectpicker').selectpicker({
        size: 10,
        dropupAuto: false
    });

    $(document).on('mouseover','.popoverClass', function() {
        $(this).popover();
    });
    $(document).on('mouseenter', 'li', function() {
        $(this).addClass('popoverClass');
        $(this).attr('data-toggle','popover');
        $(this).attr('data-trigger','hover');
        $(this).attr('data-content','test');
        $(this).attr('tabindex','0');
        $(this).attr('title','test');
    });
    $(document).on('mouseleave', 'li', function() {
        $(this).removeClass('popoverClass');
        $(this).removeAttr('data-toggle');
        $(this).removeAttr('data-trigger');
        $(this).removeAttr('data-content');
    });
});

现在这在一定程度上起了作用。当我在li元素上悬停秒时，我可以在选择小窗口的边缘看到popover，我想这是因为我只激活popover（）；当鼠标输入一个具有.popoverClass的li时，这显然不会第一次发生（因为这是它添加.popoverClass的时候）。但我不知道如何在没有事件的情况下访问委派的元素。

此外，我只能看到选定小窗口边缘的弹出窗口，我想更改它的样式。我不知道怎么做，因为它通过javascript生成div，我不知道如何控制它

你能帮我吗？

谢谢。

您需要重新绑定事件处理程序。您可以使用delegate()，这样就不必（如果您已经编写了原始函数），但由于您使用的是lib，只需在页面上创建元素后重新绑定元素上的处理程序即可。。类似的东西

$('.popover-class').popover({ ... });

在动态创建内容后的回调中。

相关文章：