gpt4 book ai didi

javascript - SVG 元素的 Bootstrap 弹出窗口不适用于 jQuery 3.0.0

转载 作者:行者123 更新时间:2023-12-03 06:45:31 24 4
gpt4 key购买 nike

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

在从 1.10.2 到 3.0.0 的跳转中,jQuery 看起来不再返回 $(this) 的上下文。由于 .live() 已被弃用一段时间,因此它已被删除。

我不想使用 .live(),但不再返回上下文这一事实破坏了 D3.js 生成的 SVG 元素的 Bootstrap 弹出框的定位。

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

我有一个在鼠标悬停在 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 中是否有不同的方法来处理这个问题,或者我必须坚持使用过时的版本?

最佳答案

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 发布了。

关于javascript - SVG 元素的 Bootstrap 弹出窗口不适用于 jQuery 3.0.0,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/37754219/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com