Hovercard 不适用于多个实例答案

【问题标题】：Hovercard not working for multiple instancesHovercard 不适用于多个实例
【发布时间】：2012-09-05 11:36:58
【问题描述】：

您好，我有多个 hovercard 实例的问题，数据是使用 ajax 传递的。 hovercard 适用于第一个实例，而不适用于第二个实例。请帮我解决这个问题。 jsfiddle 在这里： http://jsfiddle.net/sakirullahi/TnTzk/6/

【问题讨论】：

标签： jquery ajax

【解决方案1】：

查看JSFiddle

var hoverHTMLDemoAjax = '<p><label id="username"></label></p>';
$(".demo-ajax").each(function(){
   var _this = $(this);
   _this.hovercard({        
        detailsHTML: hoverHTMLDemoAjax,
        width: 100,
        delay: 500,
        onHoverIn: function () {
            $.ajax({
                url: '/echo/json/',
                type: 'GET',
                dataType: 'json',
                beforeSend: function () {                
                    _this.parent().find("#username").prepend("<p class='loading-text'>Loading ...</p>");
                },
                success: function (data) {   
                   console.log(_this);
                   var justatext="testing text goes here";                   
                    _this.parent().find("#username").html(justatext);                   
                },
                complete: function () {
                    $('.loading-text').remove();
                }
            });
        }
    });

});

【讨论】：

感谢 abhidev.. 您的解决方案是帮助我克服 cmets 中指定的第二个问题。

【解决方案2】：

您正在使用具有相同 ID 的两个标签。您不能在 HTML 中拥有它，因此只有第一个呈现的标签会采用该 ID。改用类试试吧：

var hoverHTMLDemoAjax = '<p><label class="username"></label></p>';
    $(".demo-ajax").hovercard({        
    detailsHTML: hoverHTMLDemoAjax,
    width: 100,
    delay: 500,
    onHoverIn: function () {
        $.ajax({
            url: '/echo/json/',
            type: 'GET',
            dataType: 'json',
            beforeSend: function () {                
                $(".username").prepend("<p class='loading-text'>Loading ...</p>");
            },
            success: function (data) {   

               var justatext="testing text goes here";                   
                $(".username").html(justatext);                   
            },
            complete: function () {
                $('.loading-text').remove();
            }
        });
    }
});

http://jsfiddle.net/brightpixel/rDGe5/

【讨论】：

嗨，约翰，还需要一个帮助.. 我想在 ajax 调用中传递悬停标签的 html ass 参数。所以请帮助如何识别哪个标签悬停在 onHoverIn: function () 。谢谢
如果您查看此页面，您可以看到 hovercard 的选项：designwithpc.com/Plugins/Hovercard 然后您可以通过 jQuery 访问这些部分
谢谢 john，但我在那儿找不到我需要的东西。你能帮忙写代码吗
试试看这个：stackoverflow.com/questions/8715982/jquery-hovercard 你必须改变你的代码，但这是一个更好的方法。