Вызов события щелчка динамически созданного элемента

Question

Я довольно новичок во всем, что связано с javascript, и, похоже, я попал в рассол. Я создаю сайт, на котором отображается план расположения офиса. Когда страница загружается, я загружаю данные, полученные из базы данных, в функцию, проходящую через нее, и создает привязку для каждого человека.

Это мой метод:

 function getDesks(coordsArr) { 
      for (var i = 0; i < coordsArr.length; i++) { 
       var element = $("<a href='' class='deskBtn' data-name='" + coordsArr[i].UserName + "'>.</a>"); 
       $(element).css({ 
        "top": coordsArr[i].DeskYCoord, 
        "left": coordsArr[i].DeskXCoord 
       }).appendTo(".map"); 
      } 
     } 

Проблема у меня в том, где поместить следующее событие Ajax щелчка.

$('.deskBtn').on('click', function() { 
       var user = $(this).attr("data-name"); 
       console.log(user); 

       $.ajax({ 
        url: "/Home/GetUserData", 
        type: "GET", 
        data: {user: user}, 
        success: function (data) { 

        } 
       }); 
      }); 

Я попытался поместить его после того, как цикл, но когда я нажимаю один из тегов привязки данных получают регистрируемые на экран, однако, быстро исчезает. Любые предложения были бы замечательными.

Answer 1

Почему вы не можете добавить обработчик внутри цикла for?

$(element).on('click', function() { ... }) 

Answer 2

Делите событие на статический элемент. Сделайте это для body:

$('body').on('click', '.deskBtn', function() { 

    var user = $(this).attr("data-name"); 
    console.log(user); 

    $.ajax({ 
     url: "/Home/GetUserData", 
     type: "GET", 
     data: {user: user}, 
     success: function (data) { 

     } 
    }); 
}); 

Answer 3

Вы должны попробовать с живой

$(document).ready(function(){ 
    $('.deskBtn').live('click', function(){ 

    }); 
});