Question

我一直在更新我的仪表板应用程序，它使用Bootstrap和D3.js到它所有依赖项的最新版本。

在从1.10.2到3.0.0的跳转中，看起来jQuery不再返回$（this）的上下文。它已被删除，因为.live（）已被弃用了一段时间。

我不使用.live（），但不再返回上下文的事实打破了我的Bootstrap popovers对D3.js生成的SVG元素的定位。

我的代码看起来像这样......

我有一个在SVG元素鼠标悬停时调用的函数：

function showPopover(d)
    {
        $(this).popover(
        {
            placement: 'auto left',
            container: 'body',
            trigger: 'manual',
            html : true,
            content: tip(d),              
        });
        $(this).popover('show');
    }

以下是我的称呼方式：

svg.selectAll(".svg.rect")
            .on('mouseover', 
                    function(d)
                    { 
                        showPopover.call(this, d);
                    })        
            .on('mouseout',
                    function(d)
                    { 
                        $(this).popover('destroy');
                    });

使用jQuery 1.10.2，这很好用。 Bootstrap的popover（）函数根据SVG元素的位置正确生成了DIV的样式，因为$（this）返回了上下文。

但是，由于jQuery 3.0.0上下文已被删除，因此popover（）根据指定的容器（<body>）生成它的顶部和左侧坐标。这会导致弹出窗口显示在页面的左上角，无论我将鼠标悬停在哪个元素上。

在jQuery 3.0.0中有没有不同的方法来处理这个问题，还是我必须坚持使用过时的版本？

Answer 1

Bootstrap 3需要1.9.1和2.x之间的jQuery版本（请参阅这里的bower.json文件：https://github.com/twbs/bootstrap/blob/v3.3.6/bower.json）
我也尝试过使用带有Bootstrap 3的jQuery 3但没有成功。看来我们必须等待Bootstrap 4发布。

不支持jQuery 3.0.0的SVG元素的Bootstrap弹出窗口

1 个答案: