从php echo调用javascript函数

Question

首先，我是AJAX和PhP回显变量/数组的新手。 因此，到目前为止，我已经能够根据需要在我的网站上显示图像，而无需将变量从AJAX传递到Php并返回。 例如，我唯一的问题是：我试图调用一个Javascript函数，该函数在文档准备就绪时加载。 在PhP中，我将图像回显为：

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;

在HTML中，我这样做：

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>

这可以完美显示我的图像。 我唯一的问题是class = enlarge不会被调用或无法正常工作，我不确定如何使它工作。

如果需要其他信息，而我不想在此处输入更清晰的答案，请询问。 谢谢任何帮助的人。

Javascript / JQuery更具体地讲：

// **以下内容将放大效果应用于具有class =“ enlarge”以及可选的“ data-enlargeby”和“ data-enlargeduration” attrs的图像// **它还查找具有attr rel =“ enlarge [targetimageid]的链接”，并使其成为该图像的切换器

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

Answer 1

您的影响图像的JQuery调用（具有class=enlarge ）是文档on_ready事件。 但是您通过AJAX插入图像。 这意味着在文档on_ready时，没有图像。

因此，简单的解决方案是-

把你的jQuery调用

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

至

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

编辑： HTML中的AJAX调用应如下所示

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();
    }
}