title: Calling a click event of a dynamically created element
body: <p>I'm pretty new to all things javascript related, and I seem to have got myself in a pickle. I'm creating a site which displays a seating plan of an office. When the page loads, I load data retrieved from the database, into a function that loops through it and creates an anchor for each person.</p>
  
  <p>This is my method:</p>
  
  <pre><code>       function getDesks(coordsArr) {
              for (var i = 0; i &lt; coordsArr.length; i++) {
                  var element = $("&lt;a href='' class='deskBtn' data-name='" + coordsArr[i].UserName + "'&gt;.&lt;/a&gt;");
                  $(element).css({
                      "top": coordsArr[i].DeskYCoord,
                      "left": coordsArr[i].DeskXCoord
                  }).appendTo(".map");
              } 
          }
  </code></pre>
  
  <p>The problem i'm having is where to place the following ajax click event.</p>
  
  <pre><code>  $('.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) {
  
                      }
                  });
              });
  </code></pre>
  
  <p>I tried placing it after the for loop, but when I click one of the anchor tags the data gets logged to the screen, however, it quickly vanishes. Any suggestions would be great.</p>