I am working on a page that loads data from an `XML file` that populates an HTML `unordered list`. An `unordered list` is used to make the gallery from the tutorial on [this page](https://tympanus.net/codrops/2013/03/19/thumbnail-grid-with-expanding-preview/). Unfortunately, the created thumbnails do not trigger the javascript which creates the expanding preview. 

The javascript should be activated when the user clicks on an anchor in the `unordered list`.

Any suggestions as to how to resolve this issue would be great.

**Code**

```
<script type="text/javascript">
    $(document).ready(function () {
        $.ajax({
            type: "GET",
            url: "data.xml",
            dataType: "xml",
            success: xmlParser
        });
    });

    function xmlParser(xml) {
        $('#load').fadeOut();
        $(xml).find("painting").each(function () {
            $("ul#og-grid").append('<li> <a href="http://google.com/" data-largesrc="images/' + $(this).find("image").text() + '"   data-title="' + $(this).find("title").text() + '" ' + '<>' + '<img src="images/thumbs/' + $(this).find("image").text() + '"  alt="img01"/> </a> <li> ');
            $(".painting").fadeIn(1000);
        });
    }
</script>

```