Question

我正在努力为照片库添加句柄。这是加载图片的代码：

<!doctype html>
<html>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>

<button>Click</button>

<div id="one"></div>

<script>
$(document).ready(function(){$("button").click(function(){$.post("/tests/pics.php",function(data){data=JSON.parse(data);
for (var i=2;i<data.length; i++){img=new Image(150,150);
    img.src="/tests/pics/"+data[i];
    $("div#one").append(img);} })
    }); }) 

</script>

</html>

用tests.pics目录中的图片和php读取它：

<?php

$dir='C:/xampp1/htdocs/tests/pics';
$a=[]; $i=0;
if ($dh=opendir($dir)){while (($file = readdir($dh)) !== false)
    {$a[$i]=$file; $i=$i+1;}
    closedir($dh);
}
echo json_encode($a);
?>

我想在我点击任何img时将事件句柄设置为例如Alert。我理解问题在于正确处理img.onload。

Answer 1

您可以为图像添加一个类，并为该类添加处理程序：

<script>
$(document).ready(function(){$("button").click(function(){$.post("/tests/pics.php",function(data){data=JSON.parse(data);
for (var i=2;i<data.length; i++){img=new Image(150,150);
    img.src="/tests/pics/"+data[i];
    img.class = "clickable-image";
    $("div#one").append(img);} })
    }); 
    $("div#one").on("click", ".clickable-image", function() {
        //alert your message here
    });
}); 

</script>

向图库添加句柄

1 个答案: