Question

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

首先，我使用插件创建了一个选择：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元素上时，我可以看到选择小窗口边缘的弹出窗口，我认为这是因为我只激活了酥料饼（）;当鼠标进入具有.popoverClass的li时，显然是第一次（因为这是它添加.popoverClass时）不会发生。但我不知道如何在没有事件的情况下访问委托元素。

另外，我只能看到选择小窗口边缘的弹出框，我想改变它的风格。我不知道怎么做，因为它通过javascript生成一个div，我不知道如何控制它。

你能帮助我吗？

感谢。

Answer 1

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

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

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

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

1 个答案: