.data(' bs.popover')返回undefined

时间:2018-03-31 17:12:53

标签: javascript jquery twitter-bootstrap-3 popover

我将应用程序从angular.js迁移到Angular 5 .. 应用程序使用bootstrap主题,它使用bootstrap v3.3.7。我复制了每个cssscript,奇怪的是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>

有什么想法吗?

1 个答案:

答案 0 :(得分:2)

它是undefined,因为您在bs.popover中没有html作为数据属性,并且它正在尝试阅读不存在的data-bs.popover

如果您有<div data-foo="bar"></div>,那么$('div').data('foo')将输出

https://api.jquery.com/data/

  

.data()方法允许我们将任何类型的数据附加到DOM   元素以一种不受循环引用安全的方式,因此   从内存泄漏。

ul内显示popover您需要将其放入data-content属性中,然后添加data-html="true"让popover知道它正在显示html

我不知道你想用.data() .tip() .hasClass()等所有人做什么...当你可以用$().popover()替换它时,这是一个有效的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>