Bootstrap插件Popover弹出窗的ajax动态加载内容方法

项目使用Bootstrap，Popover插件作为弹出提示框使用，比如点击一个按钮，执行ajax成功后动态加载内容并显示提示语。

如果是静态实用Popover提示窗，需要先加载：

$("[data-toggle='popover']").popover();
在需要使用提示窗的元素上 data-toggle="popover" 方式这个属性

如果是ajax动态执行加载使用，就不需要这样了，代码如下：

<script>
$(function () {    
$('.process_tips').popover({    
trigger:'click',    
html:true,    
content: function(){    
var tips_id = $(this).data('tipsid');    
var div_id =  "process_tips" + tips_id;    
return ajax_tips(div_id, tips_id );    
},    
});    
});

function ajax_tips(div_id, tips_id){    
$.get('https://www.99xq.cn/?tips_id='+tips_id, function(data){    
$('#'+div_id).html(data);    
setTimeout("$('.process_tips[data-tipsid="+tips_id+"]').popover('hide')" , 3000);    
if(data == '处理成功') $('.process_tips[data-tipsid='+tips_id+']').attr('disabled', true);    
});    
return '<div id="'+ div_id +'">99xq.cn正在加载中...</div>';    
}    
</script>

html配套代码如下：

<a class="btn btn-danger process_tips" data-placement="left" title="提醒处理" data-tipsid="136">处理</a>

会把ajax执行成功后的提示语，动态显示出来。

网上也有销毁Popover再重建的方式，不一定能用，但用这个模拟div的容器方案兼容性是最好的。

本文由久久博客www.99xq.cn原创，转载请注明出处：https://www.99xq.cn/javascript/424.html