Calling a javascript function from a php echo

Question

First, I am new to AJAX and PhP echo variables/array's. So, far I have been able to display the images on my website as desired from passing variables from AJAX to Php and back. The only issue I have is for instance: I am trying to call a Javascript function that loads when the document is ready. In PhP I do to echo the images back as:

case "Inks":
        $folder = './img_gallery/inks/';
        foreach (glob($folder . '*.*') as $filename) {
        $array[] = $filename;
    }
    foreach ($array as $imageInks) {
        if ($imageInks === "") {
            $image= $imageInks;
        } else {
            $image .= " <img height=\"100\" width=\"100\" class=enlarge src='$imageInks'/>";
        }
    }
echo $image === "" ? "" : $image;

In HTML I do:

function images(str) {
    if (str.length == 0) { 
        document.getElementById("Dispaly_Image").innerHTML = "";
        return;
    } else {
        var xmlhttp = new XMLHttpRequest();
        xmlhttp.onreadystatechange = function() {
            if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
                document.getElementById("Dispaly_Image").innerHTML = xmlhttp.responseText;
            }
        }
        xmlhttp.open("GET", "info.php?q=" + str, true);
        xmlhttp.send();
    }
}
</script>

This displays my images perfectly fine. The only issue I have is the class=enlarge is not either getting called or functioning differently and I am not sure how to make it work.

If any other information is required that I am not thinking to input here for a more clear answer, please ask. Thank you to anyone who helps.

Javascript/JQuery to be more specific about the enlarge:

//** The following applies the enlarge effect to images with class="enlarge" and optional "data-enlargeby" and "data-enlargeduration" attrs //** It also looks for links with attr rel="enlarge[targetimageid]" and makes them togglers for that image

jQuery(document).ready(function($){
    var $targets=$('.enlarge')
    $targets.each(function(i){

Answer 1

Your JQuery call to affect the images(which have class=enlarge ) is document on_ready event. But you insert the images by AJAX. That means at the time of document on_ready, there is no images.

So, simple solution is -

put your JQuery call

var $targets=$('.enlarge')
$targets.each(function(i){

to

if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
    document.getElementById("Dispaly_Image").innerHTML = xmlhttp.responseText;
    'here again!!!
}

EDITED: AJAX call in HTML should be like this

function images(str) {
    if (str.length == 0) { 
        document.getElementById("Dispaly_Image").innerHTML = "";
        return;
    } else {
        var xmlhttp = new XMLHttpRequest();
        xmlhttp.onreadystatechange = function() {
            if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
                document.getElementById("Dispaly_Image").innerHTML = xmlhttp.responseText;
                var $targets=$('.enlarge') //put JQuery call here 
                $targets.each(function(i){ //put JQuery call here
                    ...                    //put JQuery call here
                }                          //put JQuery call here
            }
        }
        xmlhttp.open("GET", "info.php?q=" + str, true);
        xmlhttp.send();
    }
}