Bootstrap Multiple Popover - 通过 Ajax TypeError 加载内容答案

【问题标题】：Bootstrap Multiple Popover - Loading Content via Ajax TypeErrorBootstrap Multiple Popover - 通过 Ajax TypeError 加载内容
【发布时间】：2012-06-24 02:46:44
【问题描述】：

我有几个弹出框（在标签上），它们进行 ajax 调用来填充它们的数据内容。我正在使用以下代码进行调用：

<script type="text/javascript">
$(document).ready(function() {
    $('.withajaxpopover').bind('hover',function(){
        var el=$(this);

        $.ajax({
            type: "GET",
            url: el.attr("data-url"),
            data: el.attr("alt"),
            dataType: "html",
            success: function(data) {
                el.attr("data-content", data);
            }
        });

        console.log(el.attr("data-content"));
        el.popover('show');
    });
});
</script>

然后像这样拨打电话：

<a href="#" id="test1" title="blabla" class="withajaxpopover" data-url="/ajax/project">blabla</a><br><br>  
<a href="#" id="test2" title="test2" class="withajaxpopover" data-url="/ajax/ports/">hahahaha</a>

当我将鼠标悬停在一个链接上时，弹出框会正确显示，但是在显示一个弹出框后，当我将鼠标悬停在任何其他弹出框上时会出现以下错误：

Uncaught TypeError: Object [object Object] has no method 'popover'

当我查看控制台时，对于所有后续悬停，ajax 正在返回正确的数据，但弹出框没有出现。任何想法我做错了什么？

【问题讨论】：

jsfiddle.net/g6eRB 但我不确定，你能不能告诉我。

标签： ajax twitter-bootstrap popover

【解决方案1】：

我最终不得不使用一个完整的其他扩展来完成我所需要的。请参阅：http://designwithpc.com/Plugins/Hovercard 具有比引导弹出窗口更好的 ajax 支持和悬停功能。并且 js 很容易修改以适应任何特定需求。强烈推荐。

【讨论】：

【解决方案2】：

试试这个：

$(document).ready(function() {
    $('.withajaxpopover').bind('hover',function(){
        var el=$(this);

        $.ajax({
            type: "GET",
            url: el.attr("data-url"),
            data: el.attr("alt"),
            dataType: "html",
            success: function(data) {
                el.attr("data-content", data);
                el.popover('show'); 
            }
        });
    });
});

【讨论】：