SVG 元素的引导弹出框不适用于 jQuery 3.0.0答案

【问题标题】：Bootstrap popovers for SVG elements not working with jQuery 3.0.0SVG 元素的引导弹出框不适用于 jQuery 3.0.0
【发布时间】：2016-10-11 18:35:25
【问题描述】：

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

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

我不想使用 .live()，但不再返回上下文的事实破坏了我的 Bootstrap 弹出框对 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 中是否有不同的方法来处理这个问题，还是我必须坚持使用过时的版本？

【问题讨论】：

标签： javascript jquery twitter-bootstrap d3.js svg

【解决方案1】：

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

【讨论】：

完全错过了。谢谢，伊夫！