2

我有几个弹出框（在标签上），它们进行 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 正在返回正确的数据，但弹出框没有出现。任何想法我做错了什么？

4

2 回答 2

1

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

于 2012-06-22T23:16:05.367 回答
1

尝试这个：

$(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'); 
            }
        });
    });
});
于 2012-08-13T09:13:39.310 回答