如何让动态产生的li element可以bind客制化的套件呢？？

网上下载了一组叫做"hovercard"的套件想要用在jQuery动态产生的

$(document).ready(function () {
   
   
     socket.on('updateUserList',function(data){
       console.log(data);
       i=0;
       $("#onlineMemberList").empty();
       $.each(data,function(){
         if(location_toogle==true) 
         {this.distance=distance(data[i].place.latitude,data[i].place.longitude,user.place.latitude,user.place.longitude,"K").toFixed(3);}
         else this.distance='null';
          
      /**這裡會動態產生很多物件 li element */
         $("#onlineMemberList").append('<li data-distance= ' + this.distance +' , data-uid='+data[i].uid+ ' , data-name='+data[i].name+' , data-sid='+data[i].sid+'>'+data[i].name+
           '<br><small>距離：'+this.distance+'公里</small></li>');i++;
       });
       });
   
   
   
    
    var hoverHTMLDemoBasic = '<p>' +
                        'John Resig is an application developer at Khan Academy.He was a ' +
                        'JavaScript tool developer for the Mozilla Corporation He is also the' +
                        'creator and lead developer of the jQuery JavaScript library.<p>';
    /** 這邊是我想要bind的事件 但是都會失敗  */
    $("#onlineMemberList li").hovercard({
        detailsHTML: hoverHTMLDemoBasic,
        width: 400,
        cardImgSrc: 'http://ejohn.org/files/short.sm.jpg'
    });
     
});