jquery - 複数のインスタンスでホバーカードが機能しない

Question

こんにちは、ホバーカードの複数のインスタンスに問題があります。データは ajax を使用して渡されます。ホバーカードは最初のインスタンスでは機能しますが、2 番目のインスタンスでは機能しません。これを修正するのを手伝ってください。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の2つのラベルを使用しています。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/