Question

我遇到了多个hovercard实例的问题，数据是使用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/

Hovercard不适用于多个实例

2 个答案: