工具提示不顯示爲最後一個數組項目

Question

我有一個簡單的MVC程序，將用戶列表傳遞到我的視圖，並且在視圖內我遍歷數組並將每個用戶名稱分配給錨標記中的標題屬性。當用戶懸停在每個鏈接上時，我使用工具提示器插件顯示標題（用戶名）。但是，由於某種原因，數組中的最後一項沒有被賦予一個'tooltipstered'類。

HTML

<div class="map" style="height: 1114px; width:960px; position:relative; margin:0 auto; background: url('/Content/MAP.png') no-repeat top center;"></div> 

的JavaScript

$(function() { 

     var allData = @Html.Raw(@JsonConvert.SerializeObject(Model.AllDeskData)); 

     var datatest; 

     function getDesks(coordsArr) { 
      for (var i = 0; i < coordsArr.length; i++) { 
       var element = $("<a href='#' class='deskBtn tooltip' title='" + coordsArr[i].Name + "' data-name='" + coordsArr[i].UserName + "'></a>"); 

       $('.tooltip').tooltipster(); 

       $(element).on('click', function() { 
        var user = $(this).attr("data-name"); 
        $.ajax({ 
         url: "/Home/GetUserData", 
         type: "GET", 
         data: { user: user }, 
         success: function(data) { 
          //console.log(data.photos[0].value); 
          $(".desk-info-box").animate({ 
           "margin-top": "0px" 
          }, 400); 
          $(".map .overlay").fadeIn(300); 
          $(".desk-info-data .name").text(data.displayName); 
          $(".desk-info-data .followers").text("who has " + data.followerCount + " followers"); 
          $(".desk-info-data .email").text("email: " + data.jive.username + "."); 
          $(".desk-img").css({ 
           'background-image' : 'url(' + '/Content/gopi_desk.jpg' + ')', 
           'background-size' : '100% 260px', 
           'background-repeat' : 'no-repeat' 
          }); 
          $(".user-image").attr("src",data.photos[0].value); 
         } 
        }); 

       }); 

       $(".hide-detail").on("click",function(){ 
        $(".desk-info-box").animate({ 
         "margin-top": "-425px" 
        }, 400); 
       }); 


       $(element).css({ 
        "top": coordsArr[i].DeskYCoord, 
        "left": coordsArr[i].DeskXCoord 
       }).appendTo(".map"); 
      } 
     } 

     getDesks(allData); 

     /* $(".deskBtn").on("click", function() { 

     });*/ 

    }); 

我不明白爲什麼最後一個項目就不會分配給它的那類。

Answer 1

呼叫附加的所有元素後的提示，

function getDesks(coordsArr) { 
      for (var i = 0; i < coordsArr.length; i++) { 
       var element = $("<a href='#' class='deskBtn tooltip' title='" + coordsArr[i].Name + "' data-name='" + coordsArr[i].UserName + "'></a>"); 



       $(element).on('click', function() { 
        var user = $(this).attr("data-name"); 
        $.ajax({ 
         url: "/Home/GetUserData", 
         type: "GET", 
         data: { user: user }, 
         success: function(data) { 
          //console.log(data.photos[0].value); 
          $(".desk-info-box").animate({ 
           "margin-top": "0px" 
          }, 400); 
          $(".map .overlay").fadeIn(300); 
          $(".desk-info-data .name").text(data.displayName); 
          $(".desk-info-data .followers").text("who has " + data.followerCount + " followers"); 
          $(".desk-info-data .email").text("email: " + data.jive.username + "."); 
          $(".desk-img").css({ 
           'background-image' : 'url(' + '/Content/gopi_desk.jpg' + ')', 
           'background-size' : '100% 260px', 
           'background-repeat' : 'no-repeat' 
          }); 
          $(".user-image").attr("src",data.photos[0].value); 
         } 
        }); 

       }); 

       $(".hide-detail").on("click",function(){ 
        $(".desk-info-box").animate({ 
         "margin-top": "-425px" 
        }, 400); 
       }); 


       $(element).css({ 
        "top": coordsArr[i].DeskYCoord, 
        "left": coordsArr[i].DeskXCoord 
       }).appendTo(".map"); 
      } 
$('.tooltip').tooltipster(); 
     }