.data('bs.popover') returns 未定义
.data('bs.popover') returns undefined
我正在将应用程序从 angular.js
迁移到 Angular 5
..
应用程序正在使用 bootstrap 主题,后者使用 bootstrap v3.3.7
。我复制了每个 css
和 script
,奇怪的是 popover
(用户下拉列表)不再在新应用程序中工作。
我正在尝试调试它,发现问题是 $('[data-toggle="popover"]').data("bs.popover")
是 undefined
.
$(document).on("click", '[data-toggle="popover"]', function (o) {
o.stopPropagation(),
$('[data-toggle="popover"]')
.data("bs.popover")
.tip()
.hasClass("in") ? (
$('[data-toggle="popover"]').popover("hide"),
$(document).off("click.app.popover")
) : (
$('[data-toggle="popover"]').popover("show"),
setTimeout(function () {
$(document).one("click.app.popover", function () {
$('[data-toggle="popover"]').popover("hide")
})
}, 1)
)
})
还有我的 html:
<ul class="nav navbar-nav">
...
<li>
<button data-toggle="popover" data-original-title="" title="">
<img class="img" src="assets/images/img-1.jpg">
</button>
</li>
</ul>
单击button[data-toggle="popover"]
时,应显示下面的html:
<ul class="nav navbar-nav hidden">
<li>
<a href="#/profile">
<span class="profile-link"></span> Profile
</a>
</li>
...
</ul>
有什么想法吗?
它是 undefined
,因为您的 html
中没有 bs.popover
作为数据属性,它正在尝试读取不存在的 data-bs.popover
如果你有 <div data-foo="bar"></div>
那么 $('div').data('foo')
将输出 bar
The .data()
method allows us to attach data of any type to DOM
elements in a way that is safe from circular references and therefore
from memory leaks.
要在 popover
中显示 ul
你需要将它放在 data-content
属性中并添加 data-html="true"
让弹出窗口知道它正在显示 html
,
我不知道你想用 .data()
.tip()
.hasClass()
等做什么,你可以用 [=28 替换它=] ,这是一个有效的 popover
:
$('[data-toggle="popover"]').popover();
/*
// this will work too
$(document).on("click", '[data-toggle="popover"]', function (o) {
o.stopPropagation(),
$('[data-toggle="popover"]')
.hasClass("in") ? (
$('[data-toggle="popover"]').popover("hide"),
$(document).off("click.app.popover")
) : (
$('[data-toggle="popover"]').popover("show"),
setTimeout(function () {
$(document).one("click.app.popover", function () {
$('[data-toggle="popover"]').popover("hide")
})
}, 1)
)
})
*/
button{
border: none;
background: none;
margin-top: 10px;
margin-left: 10px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<ul class="nav navbar-nav">
<li>
<button
data-toggle="popover"
data-original-title=""
title=""
data-html="true"
data-content='<ul class="nav navbar-nav"><li><a href="#/profile"><span class="profile-link"></span> Profile</a></li></ul>'>
<img class="img" src="https://loremflickr.com/100/100">
</button>
</li>
</ul>
我正在将应用程序从 angular.js
迁移到 Angular 5
..
应用程序正在使用 bootstrap 主题,后者使用 bootstrap v3.3.7
。我复制了每个 css
和 script
,奇怪的是 popover
(用户下拉列表)不再在新应用程序中工作。
我正在尝试调试它,发现问题是 $('[data-toggle="popover"]').data("bs.popover")
是 undefined
.
$(document).on("click", '[data-toggle="popover"]', function (o) {
o.stopPropagation(),
$('[data-toggle="popover"]')
.data("bs.popover")
.tip()
.hasClass("in") ? (
$('[data-toggle="popover"]').popover("hide"),
$(document).off("click.app.popover")
) : (
$('[data-toggle="popover"]').popover("show"),
setTimeout(function () {
$(document).one("click.app.popover", function () {
$('[data-toggle="popover"]').popover("hide")
})
}, 1)
)
})
还有我的 html:
<ul class="nav navbar-nav">
...
<li>
<button data-toggle="popover" data-original-title="" title="">
<img class="img" src="assets/images/img-1.jpg">
</button>
</li>
</ul>
单击button[data-toggle="popover"]
时,应显示下面的html:
<ul class="nav navbar-nav hidden">
<li>
<a href="#/profile">
<span class="profile-link"></span> Profile
</a>
</li>
...
</ul>
有什么想法吗?
它是 undefined
,因为您的 html
中没有 bs.popover
作为数据属性,它正在尝试读取不存在的 data-bs.popover
如果你有 <div data-foo="bar"></div>
那么 $('div').data('foo')
将输出 bar
The
.data()
method allows us to attach data of any type to DOM elements in a way that is safe from circular references and therefore from memory leaks.
要在 popover
中显示 ul
你需要将它放在 data-content
属性中并添加 data-html="true"
让弹出窗口知道它正在显示 html
,
我不知道你想用 .data()
.tip()
.hasClass()
等做什么,你可以用 [=28 替换它=] ,这是一个有效的 popover
:
$('[data-toggle="popover"]').popover();
/*
// this will work too
$(document).on("click", '[data-toggle="popover"]', function (o) {
o.stopPropagation(),
$('[data-toggle="popover"]')
.hasClass("in") ? (
$('[data-toggle="popover"]').popover("hide"),
$(document).off("click.app.popover")
) : (
$('[data-toggle="popover"]').popover("show"),
setTimeout(function () {
$(document).one("click.app.popover", function () {
$('[data-toggle="popover"]').popover("hide")
})
}, 1)
)
})
*/
button{
border: none;
background: none;
margin-top: 10px;
margin-left: 10px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<ul class="nav navbar-nav">
<li>
<button
data-toggle="popover"
data-original-title=""
title=""
data-html="true"
data-content='<ul class="nav navbar-nav"><li><a href="#/profile"><span class="profile-link"></span> Profile</a></li></ul>'>
<img class="img" src="https://loremflickr.com/100/100">
</button>
</li>
</ul>