在ajax加载数据后获取有关jquery的数据

Question

I wanted to load all images from a directory using ajax call and accept one after it is added to html. I have successfully load all images. But My problem is that i can't access its attribute in jQuery after it is inserted in html.

How can I access an image attribute after it is been added by jQuery ajax call.

My jQuery code for accessing image src is

     $("button").click(function(){
       $("#div1").load("demo.php");
     });
      $("#div1 img").click(function(){
       console.log($(this).attr("src"));
      });        

my html is :

       <div id="div1"></div>
       <button>Click Here</button>

and my demo.php is

        <?php
       $directory = /path/to/folder/;
       $images = glob($directory . "*.jpg");
       foreach($images as $image)
       {
     echo "<img class='imgr' src='$image'/>";
     }
      ?>

I am able to load images to the div1 element but I can't access its attributes. I have changed the '#div1 img' to 'img' and '.imgr' but with no luck.

Answer 1

It's because the data is loaded dynamically.

Change;

 $("#div1 img").click(function(){
   console.log($(this).attr("src"));
}); 

to

$( "#div1" ).on( "click", "img", function() {
   console.log($(this).attr("src"));
});