Hovercard不适用于多个实例

Question

您好我有多个hovercard实例的问题，数据使用ajax传递。该悬浮卡适用于一次性，而不适用于第二次。请帮我解决这个问题。 jsfiddle is here： http://jsfiddle.net/sakirullahi/TnTzk/6/

Answer 1

您正在使用两个具有相同ID的标签。您不能在HTML中拥有该标签，因此只有第一个呈现的标签才会使用该标识。带班尝试它，而不是：

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/

Answer 2

结帐的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(); 
       } 
      }); 
     } 
    }); 

});