jquery - Hovercard 不适用于多个实例

Question

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

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

});

Answer 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/