I've been using the Materialbox LightBox Gallery on my website but want to make it work with elements I've imported via a JSON file from a Database and added to the webpage using jQuery. This is my code

$.ajax({
            type: 'POST',
            url: 'blogPage_getBlogPicsJSON.php',
            data: {
                blogID: blogID
            },
            success: function(json){
                $.each(json, function(index, item) {  
                    $("#statsGallery").append("<div class='col-md-4 portfolio-item'>" + "<img class='materialboxed center-block responsive-img animated zoomIn' src='" + item.src + "'></div>");
                });//End Each
            }//End Success
        });//End Ajax

The pictures appear fine on the page and react as expected when hovering over them but the lightbox does not appear when clicked on. I usually get around this using the jQuery .on("click", "element", function(event)) function or by instantiating the JS function to the element after import but cannot find this in MDBootstrap. Cheers J.C.

---