项目使用bootstarp作为前端框架,我的模块中用到了许多弹出框(popover),需要动态向popover里添加数据,还要动态获取popover中列表li的对应数据,对此,总结出一篇博客,分享给大家!
什么是popover
看图,点击按钮在其上下左右弹出的小框框就是popover。
教程中对popover的应用只是添加死数据,例如:
<button type="button" class="btn btn-default" title="Popover title"
data-container="body" data-toggle="popover" data-placement="left"
data-content="左侧的 Popover 中的一些内容">
左侧的 Popover
</button>
data-content就是弹出框里面要显示的内容,在这里都是死数据。可是我是需要根据条件动态从数据库里拿数据显示到弹出框内的啊。于是,出现了下面的解决办法:
for (var i = 0; i < data.length; i++) {
$("#id").append("<li>" + data[i].label_name + "</li>");
}
获取数据后,利用js动态附加到对应id的弹出框中,如上述代码!
如何获取点击li触发事件
数据是动态显示到了弹出框中,项目需求还需要点击列表中的某列,触发事件。
var itemli = $("#id").children("li"); //获取制定id范围内的所有li
//遍历所有li
for (var i = 0; i < itemli.length; i++) {
(function (n) {
//当点击某li时,触发test事件
itemli[i].onclick = function () {
test();
$('#id').popover('hide');//隐藏弹出框
}
})(i)
}
注意:一定要注意,如果触发点击事件,一定要把调用事件的语句写到onclick事件里面!!!