2017-03-26 3 views
0

写真ギャラリーにハンドルを追加するのに苦労しています。ここで写真をロードするコードは次のとおりです。ギャラリーにハンドルを追加する

それを読んtests.picsディレクトリやPHPでの写真と
<!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> 

<?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でも問題はimg.onloadの適切な処理にあると私は理解しています。

答えて

0

あなたが画像にクラスを追加し、そのクラスにハンドラを追加することができます。

<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> 
関連する問題