Appended list item not showing in page source

Question

I've appended a list item to my gallery of thumbnail images. The thumbnail shows up on the page and everything looks good. Now I want to click on the thumbnail image and show its image in a modal. But my click event doesn't get called because, when looking at the source, the html doesn't exist. I also need to sort the items and perform certain functions when the sorting is done a certain way. Do I need to refresh or something? It works fine for the other items that already exist in the gallery.

Here is the javascript that appends a list item to the DOM.

var base64 = arrayBufferToBase64(responseText.ImageThumbnail);
var thumbSrc = "data:image/gif;base64," + base64;
var base64Modal = arrayBufferToBase64(responseText.Image);
var imgSrcModal = "data:image/gif;base64," + base64Modal;
var imageId = "pop" + responseText.YogaSpaceImageId;
var imagesourceId = "imagesource" + responseText.YogaSpaceImageId;


var listItem =
  "<li class=\"col-sm-6 col-md-4\">" +
  "<div class=\"thumbnail\">" +
  "<a class=\"close\" href=\"#\">×</a>" +
  "<a class=\"image\" id=\"" + imageId + "\" href=\"\" data-toggle=\"modal\" data-target=\"#myModal\">" +
  "<img id=\"" + imagesourceId + "\" src=\"" + thumbSrc + "\" data-imagesrc=\"" + imgSrcModal + "\" alt=\"image not found\" width=\"203\" height=\"136\" />" +
  "</a>" +
  "<div class=\"caption\">" +
  "<h3>Thumbnail label</h3>" +
  "<p>...</p>" +
  "<p><a href=\"#\" class=\"btn btn-primary\" role=\"button\">Button</a> <a href=\"#\" class=\"btn btn-default\" role=\"button\">Button</a></p>" +
  "</div>" +
  "</div>" +
  "</li>";

var $li = $(listItem);
$('ul#sortable').append($li);

This never gets called because its not in the source when I view it.

$('a.image').on("click", function () {
    var imagesource = $(this).find('img:first').attr('id');
    $('#modalPreview').attr('src', $('#' + imagesource).data('imagesrc'));
    $('#imageModal').modal('show');

});