Question

我有几个弹出窗口（在标签上），它们使用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返回正确的数据，但弹出窗口没有出现。我有什么想法吗？

Answer 1

我最终不得不使用另一个扩展来完成我需要的工作。请参阅：http://designwithpc.com/Plugins/Hovercard具有更好的ajax支持和悬停功能，然后引导popover。并且js非常容易修改以适应任何特定需求。强烈推荐。

Answer 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'); 
            }
        });
    });
});

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

2 个答案: