Tooltipster не отображается для последнего элемента массива

Question

У меня есть простая программа MVC, которая передает список пользователей моему представлению и внутри представления, которое я пропустил через массив и присвоил каждому имени пользователя атрибуту title в теге привязки. Я использую плагин tool tip, чтобы отображать заголовок (имя пользователя), когда пользователь наводил курсор на каждую ссылку. Однако по какой-то причине последний элемент из массива не назначен классом «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(); 
     }