JQuery.append list items do not run the script when clicking on

Question

I am working on a page loading data from XML filethat fills HTML unordered list. unordered listused to create galleries from the tutorial on this page . Unfortunately, the sketches created do not run javascript, which creates an advanced preview.

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

Any suggestions on how to solve this problem would be great.

the 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>

Answer 1

click. , .

$(xml).find("painting").each(function () {
    $('<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> ')
        .click(yourClickFunction)
        .appendTo('ul#og-grid');
    $(".painting").fadeIn(1000);
});

yourClickFunction. ,

Answer 2

click

$(document).on('click', 'element-selector', function () {
   // Do Stuff Here
});

Answer 3

You can use the following js code for this

$(document).on('click', 'ul#og-grid li', function () {
   // Do Stuff Here
});